in Full Stack JavaScript

Building a MEAN foundation

I spent some time developing an app with Angular at its heart. The app’s called MEANT, which stands for Mongo, Express, Angular, and Node Template – the idea of the template app was to develop a foundation, or a skeleton app, which I could use to bootstrap apps developed in the future. Some of the features include:

  • Authentication (local and social – Google and Github) and security (password salt and hashing)
  • UI with Angular Material Design
  • Front end routing and handling of login, signup, dashboard and home pages
  • Back end routing to expose APIs which are consumed by Angular

I got a glimpse into why frameworks like Angular are useful from different perspectives, Dan Wahlin does a good job of explaining the big picture. For the end users, they get a smoother, faster experience because only the necessary data is sent over the wire and since this is mostly in the form of an ajax request, the page won’t have to be refreshed and the UI isn’t blocked. For developers once you get your head around how Angular chops up your app (modules, controllers, routes, directives, scope, dependency injection, factories, etc.) then I’d agree with the folks I hear on the podcasts who say Angular makes organising and writing code easy, but you’ve got to get through the learning curve.

Angular Material design (think of it as Google’s answer to Bootstrap) also looks promising. It’s full featured (grids, adaptive layouts, UI controls or directives, etc.) with some nice touches e.g. input labels resizing and getting out of the user’s way once they’ve input data. Perhaps from a designer’s perspective it looks too generic, and it does scream Google/Android but that might just help end users better interact with your app.

Things I’ve learned through spending several days on the MEANT app:

  1. Securing Node web apps through authentication (PassportJs, bcrypt, Mongoose)
  2. Structuring/MV* Angular apps (Module, Views, Controllers, Routes, Factories, Scope, Dependency Injection, etc.)
  3. Creating and consuming APIs in Node and Angular respectively
  4. Integrating Material design into an Angular app (through a module and used via Directives in Views)

Things to spend time learning:

  1. Callbacks, Closures, Scope and Context. Here’s an example of a callback within a callback within a function – it’s messy. Callback Hell seems a good place to start to deal with deep nesting
  2. Responsive/adaptive design in Angular Material so apps work well across device sizes, I had a handle on how to do this with Bootstrap but it seems Angular have a couple of tricks up their sleeve to handle layout (tied in with CSS3 Flexbox)
  3. Git. I use terminal for some git commands and Github for Mac for others. I got my wires crossed at one point; I definitely need to learn how to use Git properly and also what the best practices are around it e.g. My ‘Adventures in the modern web‘ repo is being used as a container for many other apps – this probably isn’t the best thing when it comes to cloning a project
  4. Current/future front end frameworks: ReactJs (and Backbone Router). Angular2 (TypeScript, ES6)
  5. Following a Style Guide to write cleaner code

Write a Comment