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:
- Introduction by Atul Ranjan.
- Angular News by Rishabh Karnad.
- Mobile App Development with Angular by Nikhith Jadav.
- State Management in Angular by Ratnam Pandey.
- Comparing VueJS, AngularJS and React by Vanishree Yaji, Rishabh Karnad, and Neeraj Singh.
- Building a Chat App with Angular, Firebase & Firestore by Manav Goel.
- Progressive Web Apps (PWA) using Angular by Neeraj Singh.
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.
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.
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
- NativeScript Developer Day — September 18–19, New York
- AngularMix — October 10–12, Orlando
- Angular Connect — November 7–8, London
- 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 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 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
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.
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:
<Label text="This is a list item" />
Ionic’s code looks something like this:
This is a list item
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.
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
- What is State Management?
- Why State Management?
- 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
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.
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 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.
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
Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing: Realtime…slides.com
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.
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.
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.
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.