Using Angular.js and Firebase to build Apps-Avinash Kondagunta

Principal Architect, Trifecta Solutions

Thank Our Sponsors without whom Today is not Possible

Platinum

Bronze

Silver

Housekeeping…

• Thanks to our host

• Respect your speakers and fellow attendees:Set mobile devices to vibrate or silent

• Fill out session evaluations– They are used in the drawings

• You must be present to win at the wrap-up

Avinash Kondagunta

Principal Architect, Trifecta Solutions LLC

- 10 Years of IT Consulting experience serving large organizations- 5+ years of experience working on SP2007, SP2010 & SP2013- Microsoft Certified SharePoint Consultant(MCTS & MCPD in SP2010)- Worked on 4+ separate SharePoint implementations in various roles- Built enterprise applications using JavaScript frameworks on the SharePoint platform

THE FOLLWING PRESENTATION HAS BEEN APPROVED FOR ALL AUDIENCES.

Rated: E(for everyone!)

Firebase Primer

• What is Firebase?– An API to store and sync data in real-time– Easy to setup real-time persistence– Configurable security and access control rules– User authentication using Facebook, Twitter, Github, Google and

custom tokens

Firebase Dashboard - 1Datastore

Hosting Developer access control

Firebase Dashboard - 2Datastore

Simulate read/write operations

Security & Rules

App analytics

Configure and manage login

Firebase Hosting

Secrets for custom JWT authentication

FirebaseArchitectural considerations:• Can be used in conjunction

with Cloud providers(Azure, AWS, GAE, etc)

• Build a simple 2-tier architecture

• Client/Server share firebase• Firebase handles real-time

data, server handles the rest

Angular JS

• Two-way data binding• Dependency injection• Event architecture• Reusable components• End-to-end integration

testing/Unit testing• Routing & Templating

What is Angular.js?Client side JavaScript framework for building web applications

Key conceptsDirective, Views, Modules, Controllers, $scope, Services

DirectivesWhat are directives?At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Types of directives:<my-dir></my-dir><span my-dir="exp"></span><!-- directive: my-dir exp --><span class="my-dir: exp;"></span>

Relevant directives:• Ng-app• Ng-model• Ng-controller• Ng-click

ModulesWhat are modules?You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Why use modules?• declaratively specify how an application should be bootstrapped• package code as reusable modules• modules can be loaded in any order (or even in parallel) because modules delay execution

Relevant modules:• Firebase

$scopeWhat is $scope?• an object that ties a view (a DOM element) to the controller. • $scope object becomes the model. It provides an execution context that is bound to the DOM element

Although it sounds complex, the $scope is just a JavaScript object. Both the controller and the view have access to the $scope so it can be used for communication between the two. This $scope object will house both the data and the functions that we’ll want to run in the view, as we’ll see.

References:https://github.com/angular/angular.js/wiki/Understanding-Scopes

ControllersWhat are controllers?In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.

Purpose of controllers:• Set up the initial state of the $scope object• Add behavior to the $scope object

Relevant controllers:• DemoCtrl

ServicesWhat are services?Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Angular services are:

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.• Singletons – Each component dependent on a service gets a reference to the single instance generated by

the service factory.Angular offers several useful services (like $http), but for most applications you'll also want to create your own.

Relevant services:• $firebase

Using Angular JS with Firebase

• Commoditized backend(data store with real-time syncing, authentication, security rules for data access control, geofire etc) with hosting

• 3-way data binding enabling real-time data syncing

• Allows for quick prototyping of applications

Demo!

• Demo a simple to-do list using angular and firebase(CodePen)– Create a new firebase app using the account– Use codepen to write/test the code for the app– Deploy the code on firebase hosting– Discuss authentication, data storage & data access

security rules features of firebase– Discuss architectural considerations using firebase

• Demo of InCloudTrn app

That’s all, folks!

• Resources:– https://

chrome.google.com/webstore/detail/vulcan-by-firebase/oippbnlmebalopjbkemajgfbglcjhnbl?utm_source=chrome-ntp-icon

– https://www.firebase.com/blog/2013-09-25-location-queries-geofire.html– https://www.firebase.com/docs/data-structure.html