On Monday I attended the highly-anticipated February meeting of the HTML5 Denver Users Group at Casselman’s Bar & Venue. The speaker (and Meetup organizer), Scott Davis, presented on two newer collections of existing tools: Yeoman and the MEAN stack.
Yeoman
Yeoman is an interesting group of tools meant to improve productivity of front-end development. Made up of Yo, Bower, and Grunt, each component of Yeoman pulls it own weight.
Rather than reinvent the wheel, here are the descriptions of each tool from Yeoman’s website:
yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.
Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
I’m interested in the current list of 473 generators (scaffolding templates) and I’m curious to see how I can create my own to suit the needs at Crowd Favorite. It’d be great if we could scaffold out a wireframe template or Carrington Blueprint with all the desired config files in places. This way, anyone working on a particular project can compile and deploy the exact same way.
Since I don’t create web apps on a regular basis, I’m not sure Yo, by itself, is really necessary for my workflow. I’m more interested in experimenting with Grunt, and the newcomer, Gulp. For me, this is the most valuable component out of the three. It puts teams on the same playing field, regardless of personal system configuration. Bower seems interesting, but I feel like we’re already doing dependency management with Git submodules. I’ll have to read more into it.
It’s doubtful I’ll utilize all of Yeoman, but I appreciate the thorough introduction.
Exploring the MEAN stack
Like Yeoman, MEAN is a collection of frameworks and tools – MongoDB, Express, AngularJS, and Node.js. Working together, they can create a powerful Model-View-Controller (MVC) structure written entirely in JavaScript.
MongoDB is the NoSQL persistent-store database. Scott was using Mongoose.js as the Object Relational Mapper (ORM), or the ‘Model’ of MVC. In the model, you can add validation and define the schema, which is essentially a JavaScript object.
Express is the minimal application framework; the glue holding the stack together. It handles the routing (or ‘Controller’ of MVC) for http:// requests. There are no models, no notion of a database. It has no authentication schema nor a template engine. Fortunately, it fits well with the middleware package, Connect, which provides a nice bridge between the front and back-end.
AngularJS handles the dynamic views of an MVC application. Where jQuery is CSS-centric, Backbone.js is JavaScript-centric, AngularJS is HTML-centric. It’s basically HTML on steroids and allows for easy DOM-binding.
Node.js is the back-end; server that runs them all. It’s a stable platform based on Google Chrome V8, the headless JavaScript engine. Node makes it really easy to distribute and access over 50,000 custom packages via their Node Packaged Modules (npm) community. I learned of a Node Version Manager (nvm) that allows you to quickly switch between Node versions. I’m not sure I have a need for that, but nice to know it exists. I wasn’t expecting to cover so much Node.js material, but it only seems to be gaining more momentum, so I should probably pick it up sooner than later.
I’ve been interested in exploring this stack for a few months now, but since each element is pretty heavy, I was quickly overwhelmed. Thankfully, Scott gave a efficient and effective overview of each, showing how they all came seamlessly together. I like the idea of a JavaScript-only stack; needing to know only one language is intriguing.
I was having a little trouble focusing towards the end, but I walked away feeling much more comfortable about each technology and can’t wait to build something with the MEAN stack soon.
Conclusion
Overall, I thought the evening went very well. We packed a lot of information into 3 hours, which, right after a long day of work, was challenging to sit through. Beer helped.
Casselman’s is basically a large bar and lounge up front. In the back there’s a ton of chairs and tables facing the stage. Plenty of seats for all. The event was catered by a local company whose name I forget. They served beef and veggie burritos, beans, rice, and super-spicy chile verde sauce – all delicious.
The theme for the evening was how to leverage highly-cohesive, loosely-coupled tools and use them in new, efficient ways. I’ve been saying for awhile now that we’ve mostly passed the time of rapid innovation and we’re entering into a period where we refactor those innovations. JavaScript is no exception, as evidenced by the evening’s topics. An exciting time to be a developer.
This was my first time hearing Scott speak and there’s no question he was comfortable in the spotlight. He seems very knowledgeable of current technologies, which is a refreshing characteristic not always present with speakers. Scott also touched on a Yeoman generator for the great HTML5 slideshow framework powering his presentation, called Reveal.js. I may have to use it in my Tech Lunches.
Even though I attended the meetup alone, I still enjoyed myself. I’ll see if I can coerce some coworkers and friends to join me next time.