Angular on Fire!

How to take advantage of Firebase while developing client side apps at the Frontend Auckland Meetup in New Zealand during my round the world trip. #rtw80

https://www.meetup.com/Frontend-Auckland-Meetup/events/237744877/

Transcript

1. Angular on fire! Pablo Villoslada Puigcerber 07-03-2017, Frontend Auckland Meetup @ Enspiral Dev Academy
2. Story
3. #rtw80
4. Ziggo
5. Movie recommendations www.filmaffinity.com www.imdb.com
7. Rating sorting Genre filtering Pagination
8. Angular + Firebase
9. Firebase
10. Firebase database • NoSQL • JSON • Real-time • PaaS
12. JSON object { "title": "The Hobbit: An Unexpected Journey", "url": "https://ontdek.ziggo.nl/films-series/on- demand/detail/45117/hobbit-the-an-unexpected- journey", "year": "2012", "genre": "adventure, fantasy", "director": "Peter Jackson", "plot": "A reluctant hobbit, Bilbo Baggins, sets out to the Lonely Mountain with a spirited group of dwarves to reclaim their mountain home - and the gold within it - from the dragon Smaug." }
13. { "angular-on-fire-20bf9": { "-KdyADmROyZIMz6E5jC_": { "title": "The Hobbit: An Unexpected Journey", "url": "https://ontdek.ziggo.nl/films-series/ on-demand/detail/45117/hobbit-the-an-unexpected- journey", "year": "2012", "director": "Peter Jackson" } } } JSON tree
14. Query var database = firebase.database(); var query = database.ref(); query.once('value', function(snapshot) { console.log(snapshot.val()); });
15. Order data • orderByKey() • orderByChild(‘child_key’) • orderByValue() • orderByPriority()
16. Filter data • limitToFirst(10) • limitToLast(10) • startAt(‘value’) • endAt(‘value’) • equalTo(‘value’)
17. Data structure
18. Rating sorting Genre filtering Pagination
19. List of movies
20. { "angular-on-fire-20bf9": { "movies": {...} } } Movies node
21. var database = firebase.database(); var moviesRef = database.ref('movies'); moviesRef.push({ "title": "The Hobbit: An Unexpected Journey" }); Push data
22. { "angular-on-fire-20bf9": { "movies": { "-KdyADmROyZIMz6E5jC_": { "title": "The Hobbit: An Unexpected Journey" }, "-KdyNaUNgiZt8FEZ51Vu": { "title": "Black Sheep" }, "-KdyOX4pxaMJ_4jcYnjb": { "title": "30 Days of Night" } } } }
23. Get list of movies var database = firebase.database(); var moviesRef = database.ref('movies'); moviesRef.once('value', function(snapshot) { console.log(snapshot.val()); });
25. www.what2watch.nl/movies/-KdyADmROyZIMz6E5jC_ Ugly URL?
26. var moviesRef = database.ref('movies'); moviesRef .child('the-hobbit') .set({ "title": "The Hobbit: An Unexpected Journey" }); Use custom keys
27. { "angular-on-fire-20bf9": { "movies": { "30-days-of-night": { "title": "30 Days of Night" }, "black-sheep": { "title": "Black Sheep" }, "the-hobbit": { "title": "The Hobbit: An Unexpected Journey" } } } }
28. https://www.what2watch.nl/movies/the-hobbit Friendly URL
29. Filter by genre
30. { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "genre": "adventure" } } Genre child key
31. database.ref('movies') .orderByChild('genre') .equalTo('adventure'); Order by genre
32. { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "genre": "adventure, fantasy" } } Two genres? Doesn’t work!
33. Two genres? Doesn’t work! database.ref('movies') .orderByChild('genre') .equalTo('adventure, fantasy');
34. Denormalize…
35. { "angular-on-fire-20bf9": { "movies": {...}, "genres": {...} } } Genres node
36. { "genres": { "adventure": { "mission-impossible": true, "the-hobbit": true }, "comedy": {}, "fantasy": { "the-hobbit": true } } }
37. And duplicate!
38. { "angular-on-fire-20bf9": { "movies": {...}, "moviesByGenre": {...} } } Movies by genre node
39. { "moviesByGenre": { "adventure": { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "year": "2012", "director": "Peter Jackson" } }, "fantasy": { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "year": "2012", "director": "Peter Jackson" } } } }
40. Genre node query database.ref('moviesByGenre/action'); database.ref('moviesByGenre/adventure'); database.ref('moviesByGenre/comedy');
42. Sort by rating
43. Rating child key { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "genre": "adventure, fantasy", "rating": 7.9 } }
44. Order by rating database.ref('movies') .orderByChild('rating') .limitToFirst(12);
45. How data is ordered 1. null 2. false 3. true 4. numeric ASC 5. string ASC lexicographically 6. object
46. How movies are ordered 1. null (movies without rating) 2. false 3. true 4. numeric ASC (movies ordered from 0 to 10) 5. string ASC lexicographically 6. object
47. Negative ratings? { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "genre": "adventure, fantasy", "rating": -7.9 } }
48. Not quite right
50. Slow write -> Fast Read
51. { "best-movie": { "title": "Best Movie", "rating": 10, "sorting": 1 }, "second-best-movie": { "title": "Second Best Movie", "rating": 9.8, "sorting": 2 } } Sorting child key
52. database.ref('movies') .orderByChild('sorting') .limitToFirst(12); Sorting query
54. Pagination
55. database.ref('movies') .orderByChild('sorting') .startAt(1) .limitToFirst(12); Already solved
56. database.ref('movies') .orderByChild('sorting') .startAt(13) .limitToFirst(12); Get second page
58. Implementation
59. AngularFire2 • Based in observables • Realtime bindings • Authentication out of the box
60. import {Component} from '@angular/core'; import {AngularFire, FirebaseListObservable} from 'angularfire2'; @Component({ selector: 'movie-list', template: `<ul> <li *ngFor="let movie of movies | async"> {{ movie.title }} </li> </ul>` }) export class MovieListComponent { movies: FirebaseListObservable<any[]>; constructor(af: AngularFire) { this.movies = af.database.list('/movies'); } }
61. Other libraries • ReactFire • EmberFire • PolymerFire • BackboneFire
62. Kia ora! @Puigcerber