MVPStack: AngularFire

What is an MVPStack?

Welcome to the first post in the MVPStack series. I want to use this series to highlight on different technologies that I think make it easier to develop Minimum Viable Products. The goal of each of these tools is to get you to market quicker and easier, hopefully with minimal programming required (at least compared to what you’re used to).

Do you have a stack that you’d like featured in MVPStack? Contact me and I’ll check out your stack and it could be featured here!

The first MVPStack I want to introduce to you is AngularFire:

afire-logoWhat is AngularFire in a Nutshell?

AngularFire is the combination of AngularJS and Firebase. It allows you to harness the quickness of Angular development with the real-time power of Firebase Database-as-a-Service.

Not only that, but Firebase offers free app hosting as well, so you can build an entire web application without the need for any backend servers at all.

Because of this speed of setup and development, AngularFire is my personal go-to setup for creating Minimum Viable Products when I want to get something up quick and test it out.

What is the biggest benefit of using AngularFire?

Other than the fact that no server is required, in my opinion the biggest benefit to using AngularFire is their quick and easy 3-way data-binding.

With no additional programming, you can link together the value in your database, the value of the object in your Javascript, and the value of a variable in the DOM (on the screen).

Here’s a picture that shows how each part of AngularFire interacts to create the 3-way bind:

3-way-binding

This concept reduces the boilerplate code required to retrieve information from a database and display it in your app to almost nothing. And since Firebase is a NoSQL Database, your Javascript Objects are stored in the database exactly how you are already used to them: as Javascript Objects.

Firebase also provides it’s own authentication module that can be used with an Email/Password combination and several services such as Google, GitHub, Twitter and Facebook auth. Security rules can also be set up directly in the Firebase dashboard to make sure that your users only have access to the information you want them to.

Also, since the database is essentially real time, it is a great one to use for apps that use quasi-realtime data such as chats, collaboration, etc.

What is required for this MVPStack?

This is by far one of the simplest stacks you can set up, here’s what you’ll need:

  • A domain name for your app (technically not required)
  • The ability to develop code locally
  • Node.js Installed Locally

Here is what Firebase will provide:

  • A starter template for an AngularFire App
  • Your Database
  • An SSL Certificate (included)
  • Hosting for your application
  • Authentication including Email/Pass, Google, GitHub, Twitter, Facebook, etc.
  • Custom access-level security

How do I start an AngularFire project?

Here’s a video showing how to get you started in AngularFire coding locally in under 15 minutes:

I highly recommend, especially if you’re on the fence about beginning AngularFire, that you check out Firebases interactive tutorial here. It will walk you through the basics of getting AngularFire up and running.

After you’ve tried to tutorial, you have to register an account at Firebase and create a project there before doing anything else.

Then, follow along with the Firebase Hosting tutorial, but instead of doing firebase init use firebase bootstrap and choose AngularFire from the setup prompt.

After you have followed the above tutorial, you are all ready to go! In fact, just run firebase deploy and you can check out the default app running in your browser immediately.

Now that you’ve deployed your test project, some great places to start are at the AngularJS documentation and the AngularFire documentation (there are also full-project examples there as well).

There is also a great egghead.io tutorial about getting started with AngularFire. If you’re into paid tutorials, you can get a full course about AngularFire on TutsPlus by David East here.

I still have questions!

Drop a comment below and I’ll be sure to try to answer your questions as quickly as I can.

Also, if you’d like to receive news on more MVPStacks, development tips and tricks and valuable insights on creating Minimum Viable Products, please join my newsletter and I’ll be sure to send you updates once a week for free.

Free "Building Software Products in a Weekend" eBook

You'll learn the development strategies I used to program my SaaS product in just 36 hours.

Any programmer can take information in this practical 53-page eBook and use it to build a software product. You'll be able to take your idea and boil it down to a Minimum Viable Product, learn how to waste less time writing unnecessary code, and use my 3-step development process for building quickly.

Download link will be emailed to you. No spam, unsubscribe anytime.

  • cemruso

    Great idea for a series!

    I am a product manager with medium front-end development knowledge – kind of a hobby. I’ve always thought that creating a full-on web application would be out of my reach. It just seemed too complicated to learn an entire back-end programming, learn to deal with databases and servers etc. But with tools like firebase and Angular, it actually isn’t as scary as it seems. Through my basic understanding of javascript, I managed to create an SMS application in an hour!

    The concept of an MVP is really great. The initial ideas for a product are rarely the same ones that bring on the real success. We can never absolutely know what the market demands or how it will react. Tools like these enable us to create and react faster to the ever-changing environment.

    Keep up the good work.

    • http://mattkremer.com Matt Kremer

      Hey cemruso, thanks for stopping by! Glad that you like MVPStacks. It is definitely more approachable than people think. :)