My AngularJS and Firebase Wombo Combo Experience

There are tons of documentation out there that supports one’s desire to learn Angular JS The superheroic framework and Firebase which is also developed and maintained by Google, but for this article, I’ll talk about the advantages and simply what it’s like developing and AngularFire (Angular + Firebase) Application.

Now let’s dive into the basics first. In creating a website we usually consider these 3 things. The Look and Feel, The Functionality, and the Storage. In development terms, these are front-end, back-end, and the database.

Nowadays we hear the word Realtime get thrown out a lot, but what does it really mean and how does it affect web development in general? Well, for a web app to be real time basically means that when a user does something, say an action or request, the web page should respond right away without having to reload the whole page. Before this was not the case, web pages would usually need to reload to reflect the changes.

With the introduction of AJAX, however, pages today are more responsive to users actions. Though many frameworks supply this feature by default none do it as good as AngularJS, which is why it is one the most popular frameworks being used today.

Angular.js is often referred to as an MVW (Model-View-Whatever) framework and among the top benefits, for startups and mid-sized companies, people name: quick code production, easy testing of any app part and two-way data binding (changes in the backend are immediately reflected on the UI). Since release, its ecosystem has gone beyond imagination. As for now, it is reasonably called the most used JS framework for SPAs (Single-Page Applications) development and it boasts the largest community of developers.” – Hacknoon.com on top JS Frameworks to use in 2017

How awesome is that? If you’re starting out learning web development AngularJS is a good place to start because of its large community and support any questions you may have during your learning stage will definitely have an answer, trust me from experience there’s always an answer for the typical programmer questions, you just need to dig deeper if you can’t find it.

Firebase

That’s about it for Angular, now moving on to Firebase. Woah! An online Database powered by Google with built-in functions that you can use to store, edit, and remove data? Including a built-in authentication system and a rule-based data storage that keeps your valuable data safe and secure? COUNT ME IN. Firebase has always amazed me with the things that it can do, with the right amount of tweaks here and there a developer can go a long way with Firebase. Out of the box, it’s simply a database that you can manage online without having to install a single thing on your computer. All you need is a Google account you’re good to go.


So we have these 2 amazing technologies working together, now it’s time to talk about how well they play together. So for a newcomer to AngularFire what would you expect? Well if the website was a show, then AngularJS would be the performers wowing the audience with their performance and firebase would be the crew behind the scenes helping the performers with their pre-stage preparations.

AngularFire makes your life easier by providing all the needed backend functions to communicate with the database, this doesn’t mean that you’re all in the clear in terms of backend though, the logic of how you would like to save your data and secure it will still be up to you.

Data binding made even better

When pulling data from firebase, you would usually assign these data to either $firebaseObject or $firebaseArray to $scopes. The great thing I love about angular is that when these data are updated in firebase they automatically update in the $scope and view as well. Making it a breeze to create chat features and on time newsfeed updates.

Makes you improve how you structure data in general

One big problem you will face when developing with AngularFire is handling the data that you store. Sometimes you would only want to get a specific set of data but because of how you structure the Database you end up getting the data in bulk and picking out the one that you need, to avoid this problem Firebase encourages you to plan ahead and make sure that your data objects are well realized and contain all its necessary information.

Awesome free storage

Firebase gives you file storage out of the box for free, although this comes with a 1gb per day limit on uploads, it’s way more than enough to get you started with exploring this functionality. Did I also mention that these files include a download link? Perfect for creating file uploads that site visitors can download.

Javascript is an awesome language to learn

When we talk web development, javascript is the most common language we hear about because it’s fairly easy to learn and get used to and has a wide community of developers that can help you out with your JS problems during development.

“Not to be confused with Java, JavaScript allows you to build interactive websites. JavaScript has become an essential web technology along with HTML and CSS, as most browsers implement JavaScript. Thus, You must learn JavaScript if you want to get into web development, and you must learn it well if you’re planning on being a front-end developer or on using JavaScript for backend development. Furthermore, JavaScript usage has now extended to mobile app development, desktop app development, and game development. All in all, it has exploded in popularity and is now a very useful skill to learn.” – TheBestProgrammingLanguageFor.Me, “Why Learn JavaScript?

Sign up functionality is now a breeze

If the website your planning to develop has user sign ups then you’re in luck, Firebase can handle user authentication for you no problems. Great right? But of course you can’t only rely on firebase to do everything, you must re-enforce this with javascript and firebase rules to add more security.

There’s more to discover with AngularFire and the more time you spend with it the more you learn and improve along the way. As a web developer, you should always look for ways to improve. Working code isn’t where it ends, that’s where it begins.

Timothy Esquillo

Tim belongs to our team of Web Developers and a geek for anything tech and everything Star Wars. Besides creating bizarre remixes, he also collects speakers which saves us from sleepy work hours.

He spends time getting updated on tech trends and devices, playing video games, and watching movies. He also occasionally dishes out a sarcastic comment or two when the need arises.