TECH Meetup For MM Engineers In JP#2 Beat the Application Development with our Notes

1. Creating a SPA blog
with
Angular and Cloud Firestore
TECH Meetup For MM Engineers In JP#2
Naing Aung Phyo2.15.2020

2. @naingaungphyo
naingaungphyo
naingaungphyo
・System Engineer @ Airitech
・UCSY 2nd Year dropout
・Arrived in Jp on 2010
・was a Java dev (4.5yrs)
・Passionate about Web Technologies
・Love Computer Games
・Introvert

3. Agenda
・First Half
１。SPA Introduction
２。Introduction to some features of Angular
・Second Half
３。Cloud Firestore Introduction
４。Creating a SPA blog with Angular and Cloud Firestore
・Wrap Up

4. 1. SPA Introduction
How does Single Page Application work...

5. 1. SPA Introduction
SPA Pros
・User experience (UX) (Fast and fluid response time, No server round trip)
・Less amount of transmitted data
・Easy to deploy in production
・Caching, ability to work offline (Service Workers)
・Modern solutions, Microservices (Micro-frontends)
(The monolithic approach doesn’t work for larger web apps)
https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

6. 1. SPA Introduction
SPA Cons
・the chance of memory leaks
・less secure compared to traditional multi-page apps because of cross-site scripting
(XSS)
・Dependency on Javascript
・Poor Search Engine Optimization(SEO)
➡ can improve with : Server Side Rendering(SSR)

8. 1. SPA Introduction
Example SPA apps...

9. 1. SPA Introduction
A brief history of some popular javascript libraries/frameworks
1991
First public
HTML
Specification
by Tim
Berners-Lee
1995
New browser scripting language
called Mocha by Brendan Eich
in just 10 days. Renamed to
LiveScript, and Javascript.
2006 Aug
jQuery
contained tons of useful
functions that made it
easy to make any
website interactive.
2010 Oct
2013 May
2014 Feb
2016 Sept2010 Oct
2011 Dec

10. 2. Introduction to some features of Angular
・Powerful Template Syntax
*cheatsheet from https://medium.com/angular-in-depth/angular-mastery-template-syntax-194bffe2ad6f

11. 2. Introduction to some features of Angular
Expression guidelines
When using template expressions follow these
guidelines:
● Simplicity
● Quick execution
● No visible side effects
Template Statements
statement responds to an event raised by a binding
target such as an element, component, or directive.
*cheatsheet from https://medium.com/angular-in-depth/angular-
mastery-template-syntax-194bffe2ad6f

12. 2. Introduction to some features of Angular
・Data Binding
One-Way Binding (Source-to-
View)
● [property]=""
● [class.css-class]=""
● [style.css-pro]=""
● [attr.attribute]=""
● {{interpolation}} Interpolation is a convenient alternative to property binding in many cases.
When rendering data values as strings, there is no technical reason to prefer
one form to the other, though readability tends to favor interpolation. However,
when setting an element property to a non-string data value, you must use
property binding.

13. 2. Introduction to some features of Angular
・Data Binding
One-Way Binding (View-to-
Source) = Event Binding

14. 2. Introduction to some features of Angular
・Data Binding
Two-way binding [(...)]
[( )] = BANANA IN A BOX

15. 2. Introduction to some features of Angular
・Services and Dependency Injection (DI)

16. 2. Introduction to some features of Angular
・Code-Splitting & Lazy Loading
(Preloading Modules with @angular/router)
(Quicklink — preload only modules associated with visible links in the viewport)
Eg. npm i ngx-quicklink
(Predictive prefetching — preload only the modules that are likely to be needed next)
Eg. Using with Guess.js

17. 2. Introduction to some features of Angular
・Differential Loading
・Server Side Render (SSR, Prerender etc)
・Angular Cli, Angular Schematics
(ng add @angular/pwa, ng deploy, ng generate, ng add @nguniversal/express-engine)

18. <Extra>
Virtual DOM (React)
React was the first mainstream framework to use virtual DOM, which is defined by this key idea:
Every component creates a new virtual DOM tree every time it gets rerendered. React
compares the new virtual DOM tree with the old one and then applies a series of
transformations to the browser DOM to match the new virtual DOM tree.
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

19. <Extra>
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36
Incremental DOM (Angular)
Incremental DOM is used internally at Google, and it
is defined by this key idea:
Every component gets compiled into a series
of instructions. These instructions create DOM
trees and update them in-place when the data
changes.

20. <Extra>
Incremental DOM (Angular)
Why did the Google team go with incremental DOM instead of virtual DOM?
They have one goal in mind: applications have to perform well on mobile devices. This mainly meant optimizing two things: the
bundle size and the memory footprint.
・The rendering engine itself has to be tree shakable
・The rendering engine has to have low memory footprint
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

21. <Extra>
Virtual DOM creates a whole tree from scratch every time you rerender.
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36
Incremental DOM, on the other hand, doesn’t need any memory to rerender the view if it
doesn’t change the DOM. We only have to allocate the memory when the DOM nodes are
added or removed. And the size of the allocation is proportional to the size of the DOM change.

22. <Extra>
From a pure performance point of view, there's no simple answer as to which is
"better". Like all things in programming, it's about tradeoffs.
I think (this is usually where I get in trouble...) that's its fair to say that React-style UI-
as-a-function-of-state systems can be more flexible from the developer's point of view -
a developer can generally return any virtual DOM representation from the render
function, and it's the library's job to turn those changes into real DOM.
The tradeoff (and part of the philosophy Angular is built around) is that templating
allows Angular to deeply understand a template, and generate highly optimized code,
in both pure CPU cycles, but low memory consumption and garbage collection.
On the Angular team, we try very hard to not do "versus" comparisons - they're usually not helpful in evaluating what your project needs.
https://www.reddit.com/r/Angular2/comments/8ytfc1/reacts_virtual_dom_vs_angulars_change_detection/

23. 3. Cloud Firestore Introduction
Firebase's original database. It's an efficient, low-latency
solution for mobile apps that require synced states
across clients in realtime.
Data Model
・Stores data as one large JSON tree.
Firebase's newest database for mobile app development.
It builds on the successes of the Realtime Database with
a new, more intuitive data model. Cloud Firestore also
features richer, faster queries and scales further than the
Realtime Database.
Data Model
・Stores data as collections of documents.
2012 2017 (beta)
2019 Jan(GA)

24. 3. Cloud Firestore Introduction
Firebase Realtime Database
・Offline Support for iOS and Android clients
・Presence supported
・Single-region solution (Extremely low latency,
ideal option for frequent state-syncing)
・Scaling requires sharding.
1) 200,000 concurrent connections and 1,000
writes/second in a single database 2) No local limits on
write rates to individual pieces of data.
Cloud Firestore
・Offline Support for iOS, Android, and web clients
・Not supported natively (can leverage realtime
database by syncing Cloud Firestore and Realtime
Database using Cloud Functions)
・Multi-region solution that scales automatically.
(ensuring global scalability and strong reliability.)
・Scaling is automatic.
1) 1 million concurrent connections and 10,000
writes/second 2)Has limits on write rates to individual
documents or indexes.

25. 3. Cloud Firestore Introduction
Firebase Realtime Database
・Deep queries with limited sorting and filtering
functionality
1) Queries can sort or filter on a property, but not both.
2) Queries are deep by default: they always return the entire
subtree.
3) Queries can access data at any granularity, down to individual
leaf-node values in the JSON tree.
Cloud Firestore
・Indexed queries with compound sorting and
filtering.
1) Can chain filters and combine filtering and sorting on a property in
a single query.
2) Queries are shallow: they only return documents in a particular
collection or collection group and do not return subcollection data.
3) Queries are indexed by default: Query performance is proportional
to the size of your result set, not your data set.

26. 3. Cloud Firestore Introduction
Key capabilities of Cloud Firestore
・Flexibility
・Realtime updates (also support one-time fetch queries)
・Offline support
・Designed to scale

27. 4. Creating a SPA blog with Angular and Cloud Firestore
Advantages of creating a blog and writing a blog (my POV)
・Hands-on experience of new technologies
・Motivation is hard to sustain without a driving force
・Find people/friends with a common interest and it’s fun to share and improve
together.
・Find out what you are doing/thinking it wrong by discussing with others
・A portfolio/showcase of your works/skills/history/ideas/projects

28. 4. Creating a SPA blog with Angular and Cloud Firestore
Current Architecture Overview (www.naingaungphyo.me)

29. Wrap Up
・Talked about SPA
・Talked about Some key features of Angular
・Talked about Cloud Firestore
Advice.... (next page)

30. Local Setup
1. Install latest Node.js
2. npm i -g @angular/cli
3. ng new my-app
Run the App
1. cd my-app
2. ng serve -o
Detail: https://angular.io/guide/setup-local

31. Photo by Howard Riminton on Unsplash
bit.ly/2vA8aIM