Full Stack: Lessons Learned from MyCongress
This past week, I worked with a team to develop an app called MyCongress. The goal was to rapidly iterate toward a minimum viable product. Our app's target was a system that could display a variety of congressional data using D3, Angular, and the Sunlight Foundation API.
Our final application has thus far turned out a bit lacking in its initial features, but it has some strong points. On the back end, we set up an effective Mongo database using Mongoose. On the front-end, we worked with Angular and D3 to make an effective UI. Unfortunately, we were plagued with minor routing issues and problems with our Yeoman Grunt File that kept us from accomplishing as much as we could.
After the whole process, I came away with a new appreciation for what full-stack development means, synthesized in the following lessons.
Lesson 1: Shortcuts can quickly turn into time-sinks
For MyCongress, we deployed our initial application using Yeoman, a tool that allows users to set up a scaffold for their project. This did a TON for us. We came out of the gate with (unnecessary) authentication routes, and a list of npm dependencies that went on forever. Still, this felt like an advantage.
Over the course of development, however, I soon discovered that I was spending more time trying to work my way through the code we already had rather than writing new code myself. This was a huge pain. The grunt file also seemed to work in mysterious ways, so I'd have to work my way through that whenever I made big changes to the app.
Still, Yeoman offered some advantages. For me, though, the advantages weren't enough to outweigh the pain of working with it.
Lesson 2: Full Stack Apps Get Huge
When you're working on a larger code base, it's easy for it to get out of hand. With partials, views, routes, and other files all throughout your project, one can get lost easily.
During the project, I found that Angular was extremely helpful for structuring our code, even though it sometimes got confusing when mixing UI-Router with express routes on the back-end. Still, it was easy to decide where to place angular code in the larger app structure, which is extremely convenient when working in a relatively large code base.
Lesson 3: CSS can be a Game-Changer
A lot of programmers I know like to steer clear of CSS, preferring to stick to bootstrap whenever possible, deviating rarely. The unfortunate result is that a lot of apps end up looking exactly the same.
On MyCongress, we still used bootstrap for a number of things, but we built a custom css framework on top of that, and it ended up looking more polished than some other applications.
Naturally, functionality and basic features should still be the number one concern, but CSS can be an essential second thought. A well-established, consistent front-end can be the difference between an app that others think is 'just cool' and an app that others see as unbelievable.
That's all for now!