Angular Meetup Bangalore — December 2017

Summary of our first Angular Meetup

Recently, we held our very first Angular Meetup at our office. We are glad to say that the event was a huge hit! #humblebrag 😆

We’ve been hosting React Native Meetups for a year now, but this was the first one that we hosted for Angular. A substantial number of people attended this event, of which many were developers, students, and even enthusiasts who were there to learn more about this amazing framework!

Given that this was our very first Angular Meetup, we were extremely excited to see so many people in attendance!


The agenda for this Meetup was:


Angular News

Rishabh spoke about the recent developments in the world of Angular. The most significant of these developments would be the release of Angular 5.0, which is also known as the Pentagonal Donut 😆.

Angular 5.0 brings with itself many new features and changes. The main goal of this update was to make Angular smaller and faster to use.

Angular CLI 1.5 now creates its projects in Angular 5 by default. If you already have an Angular 4 project, you can upgrade it to Angular 5 by following the instructions for the official guide.

Another amazing thing about Angular 5 is that it also supports ReactiveJS (RxJS). RxJS is a library for reactive programming using Observables. This makes it easier to compose asynchronous or callback-based code.

Angular 5 supports RxJS 5.5.2 which has something called lettable operators.

Lettable Operators offer a new way of composing observable chains. These provide advantages for both application developers and library authors.

Nrwl Nx

Narwhal Technologies has come up with Nx — An open source toolkit for enterprise Angular applications.

Nx is designed to help developers create and build enterprise-grade Angular applications with proven project structure and patterns.

Google Firestore with AngularFire

AngularFire is the officially supported AngularJS binding for Firebase. It is a complement to the core Firebase client and provides us with several Angular services like:

  • $firebaseObject — synchronized objects
  • $firebaseArray — synchronized collections
  • $firebaseStorage — store and retrieve user-generated content like images, audio, and video
  • $firebaseAuth — authentication, user management, routing

AngularFire2, the official library for Firebase and Angular.

Together, these two provide the developer with:

  • Real-time observable streams from Firestore
  • Easy Querying
  • Offline support

Upcoming Angular Conferences and Events

  • ng-conf— April 5–7, Salt Lake City
  • NgAtlanta — Jan 30-Feb 2

Mobile App Development with Angular

Nikhith spoke how a developer can use Angular, a framework meant for Web Development, to build mobile apps!

Hybrid or cross-platform apps have started to gather a huge following among developers. After all, who would want to write the same app twice (once for Android and once more for iOS) when you can write a single code that can work on both devices. But cross-platform app development is not that new, there are several tools out there to help you build Hybrid Apps. Some of them are:

Among these, React Native, Ionic, and NativeScript are the most famous and widely used tools. Here, Ionic and NativeScript will be in the focus as they are more associated with Angular than React Native.

Ionic

Ionic is an open source framework that builds hybrid mobile apps with the use of Angular, Sass and Cordova.

To get started with Ionic, type the following commands in your terminal:

npm install -g ionic cordova
ionic start DemoProject blank
cd DemoProject blank
ionic platform add android
ionic platform add ios

NativeScript

NativeScript is a framework that builds native iOS and Android apps without web views.

To get started with NativeScript, type the following commands in your terminal

npm install -g nativescript
tns create DemoProject
cd DemoProject
tns platform add android
tns platform add ios

Which one to use?

Both NativeScript and Ionic are great tools to build hybrid tools. So how can a developer decide which tool is best suited for your project? Here are some of the factors that you can take note of when making such decision.

  • Performance

The performance of NativeScript app is better than an Ionic app. This is because Ionic app uses Apache Cordova to run your app in webview, which takes a hit on its performance.

  • Code Comparison

NativeScript’s code looks something like this:

<ListView>
<ListView.itemTemplate>
<Label text="This is a list item" />
</ListView.itemTemplate>
</ListView>

Ionic’s code looks something like this:

<ion-list>
<ion-item>
This is a list item
</ion-item>
</ion-list>

The components of NativeScript are actually “native”. But Ionic’s components are custom made for ionic. The “native-ness” of NativeScript’s components is another reason why NativeScript is better than Ionic.

  • Debugging

The debugging experience of ionic is easier and quicker than NativeScript. You can debug parts of Ionic app that do not use native device features.

Whereas, the debugging for NativeScript happens in the console which, in my opinion, is not the best experience.


State Management in Angular

Ratnam talks about the various methods that a developer can adopt in order to achieve State Management in their Angular projects. In his talk, Ratnam tries to answer these 3 questions:

  1. What is State Management?
  2. Why State Management?
  3. How can States be managed?

In order to build good apps, a developer should be able to decide what information should be stored in the memory and what information should be stored in the URL. Along with that, we also need to take into consideration the local UI state.

The most basic reasons for implementing state management are:

  • State Synchronization
  • Re-rendering

State Synchronization

The persistent state and the server state store the same information. But so do the client state and the URL. Due to this, we have to synchronize them in the following way:

The Server State is stored on the server and can be provided via a REST endpoint.

The Persistent State is a subset of the server state stored on the client, in memory. Think of it as a kind of cache.

The Client State, as the name suggests, is stored at the client’s side of the app.

Some applications often have state stored on the client, but is not represented in the URL. For example, YouTube can now remember where I stopped watching a particular video. So the next time I open that video, it will resume from that point and not from the beginning.

Individual components can have local state governing small aspects of their behavior. A button can decide what it’s color should be.

Re-rendering

Usually, the UI and Data Layer of your app interact with each other in the following way:

Suppose you are building an Angular application that has two main routes: One that displays a list of contacts, and the other one showing detailed information about each contact.

Check out Ratnam’s slides to know more about State Management in Angular


Building a Chat App with Angular, Firebase & Firestore

Manav showed me and the rest of the audience how we can build an awesome Chat App using Angular with Firebase and Google’s new Cloud FireStore!

Before going to the ChatApp, let’s go back to Angular FireStore, a.k.a AngularFire 🔥

AngularFire

AngularFire is the official Angular binding for Firebase. It uses the powers of RxJS, Angular and Firebase to help you build spectacular projects. With AngularFire you can:

  • Synchronize data in real-time.
  • Log in users through a variety of providers and monitor the authentication state in real-time.
  • Store data offline automatically.
  • Integrate with ngrx using AngularFire’s action based APIs.

Cloud Firestore or Real-time Database

Firebase offers two cloud-based, client-accessible database solutions that support real-time data syncing:

  • Real-time Database: This is Firebase’s primary database. It provides an efficient, low-latency solution for apps that require synced states across clients in real-time.
  • Cloud Firestore: Firebase’s new flagship database for mobile app development. It improves on the successes of the Real-time Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than the Real-time Database.

Real-time Database stores data as one large JSON tree. This makes it complex since hierarchical data becomes harder to organize at a larger scale.

But Cloud Firestore stores its data in the form of documents that are organized into collections. This way, data becomes easier to organize even at larger scale.

Getting Started

Install Firebase and AngularFire in your system by typing the following command in your terminal:

npm install firebase angularfire2 --save

Now go to https://console.firebase.google.com and follow the steps to create a database for your project.

Check out Manav’s slides to see how you can create a Chat App using Angular, Firebase, and Firestore

You can also take a look at the official docs of Cloud Firestore


Progressive Web Apps Using Angular

In this talk, Neeraj showed me how a developer can build PWAs with the help of Angular.

But first, let’s briefly talk about PWAs in general.

What are PWAs?

Progressive Web Apps, are apps that, according to Google show have the following qualities:

  • Reliability: These Apps should be able to load instantly even if the network conditions are abysmal or even non-existent.
  • Fast: Apps should be interactive and provide a faster user experience than normal apps.
  • Engaging: These apps should be able to give the users an immersive experience and stay connected with the app.

Why do we need PWA?

A vast majority of sites and apps perform rather poorly on the mobile platform.

By building PWAs, businesses can ensure user satisfaction because of PWAs’ sheer speed 😄. Even install process is a lot smoother in PWA’s than on normal apps.

Offline Support

PWA’s provide offline support to the user with the help of something called Service Workers.

A Service Worker is a script that a browser can run in the background, completely independent from the web page.

Because, it is written in JavaScript, Service Workers cannot DOM directly.

Basically, Service Worker is a programmable network proxy, that allows you to control how a network requests from your page are handled.

It is started only when it is needed. The other times, it’s completely terminated.

To know more about service workers and how to build PWAs using Angular, check out these slides by Neeraj:


In The End…

We at GeekyAnts were truly humbled by the amount of RSVPs that we received, especially since this was the very first Angular Meetup that we hosted.

We would love to host another Angular meetup soon, and we encourage you to participate, as part of the audience or even as a speaker.

The main goal of having such Meetups is not only the knowledge that the speaker shares, but it is the interaction that the audience and speaker have with each other and the networking that happens between the participants.

Join our Angular Meetup Group to stay updated with news about the next meetup. You can follow us on Twitter and Facebook.

We also have a React Native Meetup Group which currently has about 2,400 members 🙌.

That’s not all! We are also planning to host a Flutter Meetup very soon! Click here to join in.


Thank you for reading this rather long post! I am Rajat S, a die-hard DC Comics fan who loves Marvel movies. I am currently at GeekyAnts as a Tech Content Writer.

Please do 👏 and follow me to stay updated with all the exciting things that are happening at GeekyAnts!