Introduction to MEAN

Junghoo Cho

cho@cs.ucla.edu

Traditional Web Development

• Stack
  • HTTP: Apache/Nginx
  • Server runtime: PHP/Servlet
  • Data storage: MySQL
• (Almost) all code runs on the server
• Browser is a passive HTML/CSS rendering engine

After AJAX

• Most code runs in the browser as JavaScript
  • Server has gradually transformed to “back-end service” that provides data-persistence and transaction support
• Benefits
  • Better user experience
  • Less load on the server (leading to better server scalability)

Challenges in AJAX Development

• Increasing complexity in the JavaScript code
• Impedance mismatch
  • JavaScript on client, PHP/Java on server
  • JSON for data transport, relation for data storage

Developer “Wishlist”

• Q: Can we use JavaScript for both client and server development?
• Q: Can we use JSON as the data model for storage engine?
• Q: Any way to reduce complexity of client-side development?

Modern Full-Stack Web Development

• Data Engine: MongoDB
• Server Runtime: Node.js and its “packages” (e.g., Express)
• Client Runtime: Angular/React/Vue, …