MEAN Stack

  1. Static web apps
    1. Static web apps - web apps that can be delivered directly to the browser without any server-side alteration of the HTML, CSS, or JavaScript content
    2. Traditional web architecture
      1. Browser requests a dynamically generated web page
      2. Web server receives request and gets data from database
      3. Server generates complete HTML web page and sends back to browser
      4. JavaScript increasingly used for Ajax, DOM manipulations, and animation
    3. Modern web architecture - Static Apps
      1. Browser requests a static web page
      2. Server sends back a static HTML file which is rendered in the browser
      3. JavaScript in the page uses Ajax to load information via an API (server accesses data from database)
      4. JavaScript modifies the DOM to display the content
    4. Advantages to static apps
      1. Simpler back end - API can consistently serve web apps and mobile apps
      2. Performance - Costly effort of building web pages moved from server to client
      3. Standardized tools - Most development effort spent on basic building blocks: HTML, CSS, JavaScript and less on back-end languages and frameworks like Ruby, Python, and .NET
      4. Rapid prototyping - Modern frameworks like Bootstrap and AngularJS make it easier to develop mock interfaces
    5. Implementing static apps
      1. Preprocessor languages
        1. Programming languages that are compiled into HTML, JavaScript, or CSS
        2. Offer a terser syntax, additional features, or other benefits over the base language
        3. Examples: CoffeeScript, Stylus, HAML, Dart
      2. Build tools
        1. For performing important tasks like combining multiple files into one, compiling preprocessor languages, and running tests
        2. Examples: Jekyll, Grunt, Yeoman, Gulp
      3. Package managers
        1. For easily installing open source or shared library code that is meant to work across multiple applications
        2. Dependencies are declared for a project and the package manager automatically downloads and installs them into a usable location
        3. Examples: Bower, Component
      4. JavaScript frameworks
        1. Tools and methodologies to organize an application's logic and data structures and ways to render templates or manipulate HTML on the page
        2. One of the most defining aspects of an application
        3. Examples: AngularJS, Ember, Backbone
      5. UI frameworks
        1. For quickly implementing common interface patterns by providing sensible default styles and behaviors for an application
        2. Provide elements like buttons, grid layouts, well-styled forms, etc.
        3. Aids development of responsive web pages
        4. Examples: Bootstrap, Foundation
      6. Testing frameworks
        1. For automating and writing unit and end-to-end tests
        2. Common to use Protractor to run e2e tests for Angular apps
        3. Jasmine is popular for writing Angular tests
        4. Mocha is the choice JavaScript testing framework for Node apps
      7. API or web service
        1. Provides the data needed to populate the app's web pages with content
        2. Often uses a database: relational or NoSQL (MongoDB, Redis, Neo4j, etc.)
        3. Typically implemented with Java (JAX-WS and JAX-RS), ASP.NET Web Services, or Node.js
        4. Third parties offer APIs that support static web apps through Cross-Origin Resource Sharing
  2. MEAN stack
    1. MEAN acronym first coined by Valeri Karpov in 2013
      1. MonogoDB - NoSQL database for storing documents
      2. Express - NPM package for building web servers with Node.js
      3. AngularJS - popular JavaScript framework from Google
      4. Node.js - JavaScript runtime for running JavaScript apps outside a browser
    2. MEAN is an opinionated full-stack JavaScript framework
      1. Opinionated - guides you into developing an app a certain way
      2. Un-opinionated - Very flexible, allows developer to choose best way to develop the app (.NET, PHP)
      3. Full stack - Covers all layers of the app: server, business logic, data models, UI, etc.
    3. Meant to replace traditional LAMP stack (Linux, Apache, MySQL, PHP)
    4. Developers sometimes start with pre-packaged MEAN.js or MEAN.io (note the differences)