Ever since I delved into TypeScript 2 years ago I’ve been intrigued by the idea of an application built on it from front-to-back. This idea isn’t that odd and many Angular 2+ seeds are already using this tech stack. The MEAN Checklist is an example app that demonstrates a full stack TypeScript application. It was written in one week and deployed through Heroku. While it isn’t perfect and has some rough Heroku integration due to timeline constraints, it’s a great example app for rolling your own full stack apps.
*NOTE*: Heroku’s free tier is pretty slow these days. It may take a minute or two for the app to initially load when it wakes up out of sleep mode. As Heroku puts apps in a sleep state if they haven’t been used recently.
- Angular CLI
- Bootstrap 4
- Font Awesome
- API Testing
Ever had a team project with where merge conflicts seemed infinite? Code vanished constantly and nobody knew how? Or perhaps nobody could decide on how to create and merge new branches? Well you might want to consider GitFlow which solves all of these problems. It focuses on a master and develop branch, but allows you to create new features and releases for both of them with minimal risk of merge conflicts. What’s even better is popular Git GUI’s like SourceTree and Git Tower support it out of the box. For more info on GitFlow and getting started, check out the link below.
If you haven’t already heard Bootstrap 4 is being widely used by tons of companies in production. Although it isn’t finished yet, it’s quite stable and in beta. If you’re a Bootstrap 3 user you’ll notice tons of needed features have been added. Such as better syntax for handling margins and granular control over background colors.
One of the biggest hurdles when starting a new project is having a stable maintained CLI environment. Thankfully Angular 2’s CLI is now stable and ready for use. I’ve tinkered with it and I’m very happy with the toolset. Mainly because it has a lot in common with Ember’s CLI. Which is a tried and true development environment. Check it out at the link below.
I’ve been meaning to learn Ember.js to cross-compare it against AngularJS. So I set myself to writing a Heroku application with Ember and Ruby on Rails. From what I heard they’re are supposed to work together magically… I was kind of right, kind of wrong.
*****IMPORTANT*****: You can still view the source code, but this app is now deprecated and no longer works on Heroku. See the MEAN Checklist app for a complete rewrite of this.
What was painful
Rails required a lot of adjustments to deliver data and Ember.js also requires a chunk re-configuring. There was little out of the box magic between both of them. Authentication with Ember’s simple auth plugin was a mess. Mainly because it, like most Ember related docs, is in a bit of messy transitional state between Ember 1.0 and 2.0. Google search results can be a nightmare since a lot of people are still using and writing material for 1.0.
What I like about Ember.js
The structure of Ember.js over AngularJS is more structured. As it has much better standards and specific ways of doing things. But, if you want to deviate from its standard way of doing things you’ll probably run into an avalanche of issues. Still, this is probably the best MVW / MVC framework for building something with a large team.
The Ember CLI is just as magical as Rails’ equivalent system. It does everything you want and even sets up the beginnings of a nice TDD environment. The CLI is years ahead of the Yeoman AngularJS equivalent.
View the live app
It took me about 2 weeks and 40 hours to get everything fully functional. Source code for the app is available and you can play with it live on heroku at the link below.