Getting MEAN: A Hands-On Workshop for Full-stack JavaScript Web Application Development
Jeffry Stephen Babb West Texas A&M University
Kareem Dana West Texas A&M University
Musa J Jafar Manhattan College
Objectives JavaScript has regained significant traction within the last 10 years as web application User Experiences (UX) have gravitated toward replicating the fluidity of desktop interfaces. This phenomenon (particularly in utilization of AJAX) was a principle driver of the Web 2.0 phenomenon. Recently, this trend has accelerated with the advent of HTML5, CSS3, and improvements in the utilization of JavaScript. In particular, with the arrival of NodeJS in 2009, web application developers finally had a server-side runtime environment and library utilizing JavaScript. Given the availability of server-side JavaScript, and given improvements in the specification of the language itself, interest in JavaScript has arisen where JavaScript and JSON can be used to bridge front-end and back-end web application development with one language and one data persistence strategy. The MEAN stack (MongoDB, Express, AngularJS, and NodeJS) has become a popular approach for realizing end-to-end, JavaScript-driven Single Page Architecture (SPA) web applications. This workshop is intended to familiarize attendees with the MEAN web application stack.
The workshop will be given in a modular and hands-on manner, whereby participants will learn the basic steps of each major component of the MEAN stack. Attendees will work with a simple example project to realize how these components come together to create responsive and document-driven SPAs.
We will begin with NodeJS: understanding installation and configuration, writing a few simple “hello world” programs against the built-in library, and general orientation to server-side JavaScript. We will then cover Express, which extends NodeJS to provide the necessary framework to develop web applications (particularly SPAs) using NodeJS. To understand the significance of end-to-end JavaScript, it is important to understand that MongoDB is a document-driven database, as opposed to the very-familiar relational database management systems which harness SQL. MongoDB takes in-memory collections of JavaScript objects and stores them as Binary JSON. This makes the persistence-to-volatile data translation very efficient and flexible. We complete our exploration of the MEAN stack with the front-end/client-side AngularJS MVC framework. AngularJS provides a full MVC implementation that abstracts the data layer and utilizes a templating strategy for the presentation layer. As is the case with NodeJS, all logic and data manipulation is expressed in JavaScript. The workshop culminates with a working example that demonstrates how the elements of the MEAN stack work together to provide a variety of web application architectures.
Targeted Attendees IS educators who are interested in front-end, back-end, or full-stack web development. Attendees should be somewhat familiar with the basic front-end technologies (HTML5, CSS3, and JavaScript) and have some curiosity about what is entailed in working with the MEAN stack.
Recommended Citation: Babb, J. S., Dana, K., Jafar, M. J., (2015). Getting MEAN: A Hands-On Workshop for Full-stack JavaScript Web Application Development. Proceedings of the EDSIG Conference, (2015) n.3577, Wilmington, NC