how angulardart & firebase did an app together
TRANSCRIPT
![Page 1: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/1.jpg)
How
AngularDart & Firebase did an App together
Jana Moudra @Janamou #dfua
![Page 2: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/2.jpg)
@Janamou
![Page 3: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/3.jpg)
![Page 4: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/4.jpg)
JavaScript, TypeScript, Dart, Elm,...
React, Angular, Ember.js, Preact, Vue.js, …
?
![Page 5: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/5.jpg)
![Page 6: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/6.jpg)
![Page 7: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/7.jpg)
dartlang.org
For building Web browser, server, command line, and mobile apps
![Page 8: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/8.jpg)
flutter.ioFlutter talk
Saturday, 10:10
For building Web browser, server, command line, and mobile apps
![Page 9: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/9.jpg)
![Page 10: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/10.jpg)
But hey, isn’t Dart dead?
NO
![Page 11: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/11.jpg)
Sunday night...
Dart 2.0 is close...
![Page 12: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/12.jpg)
Easy to learn
Optionally vs statically typed
Compiles to JavaScript
Tons of libraries in the SDK
![Page 13: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/13.jpg)
main() {
print("Hello #DFUA 2017!");
}
![Page 14: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/14.jpg)
// Is null no undefined
var sum;
// Tools warn you
int count = "Jana";
![Page 15: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/15.jpg)
// Cascade operator
Dog dog = new Dog()
..name = "Andy"
..age = 8;
![Page 16: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/16.jpg)
this is always this
no need to fix it!
![Page 17: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/17.jpg)
![Page 18: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/18.jpg)
+ =
webdev.dartlang.org/angular
? ?? ??
![Page 19: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/19.jpg)
is using it!
Jana Moudra @Janamou #dfua
![Page 20: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/20.jpg)
$$$ at Google
![Page 21: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/21.jpg)
AdWords, AdSense, AdMob
Millions of lines of code
25-100% increase in development speed
at Google
![Page 22: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/22.jpg)
Componeeeeeents FTW!!!
![Page 23: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/23.jpg)
Simple & reusable
Not only viewServices Router
Directives HTTP Pipes Forms Components Testing
![Page 24: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/24.jpg)
Great apps need a backend!
![Page 25: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/25.jpg)
NeededLots of implementation
Database, File Upload, User accounts, Anonymous user, OAuth,
Hosting ...
![Page 26: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/26.jpg)
For a simple app...
![Page 27: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/27.jpg)
Hello Firebase!
![Page 28: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/28.jpg)
Realtime Database
Authentication
Cloud Storage
MessagingHosting... firebase.google.com
![Page 29: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/29.jpg)
DEMO
TIME
Jana Moudra @Janamou #dfua
![Page 30: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/30.jpg)
Include Js SDK
package:firebase
package:angular
+
![Page 31: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/31.jpg)
<!DOCTYPE html>
<html>
<head>
<title>AngularDart + FB = ♥ demo</title> <meta charset="utf-8">
<script src="firebase.js"></script>
... imports for Dart scripts and others
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>index.html
![Page 32: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/32.jpg)
->
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularDart + FB = ♥ demo</title> <meta charset="utf-8">
<script src="firebase.js"></script>
... imports for Dart scripts and others
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
![Page 33: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/33.jpg)
import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ ... ]
)
class AppComponent {
// Here is the implementation
}
app_component.dart
![Page 34: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/34.jpg)
app_component.dart
->
import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ ... ]
)
class AppComponent {
// Here is the implementation
}
![Page 35: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/35.jpg)
<div>
<layout-header></layout-header>
<main>
<div id="container">
<new-note></new-note>
<notes></notes>
</div>
<layout-footer></layout-footer>
</main>
</div>
app_component.html
![Page 36: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/36.jpg)
app_component.html
->
<div>
<layout-header></layout-header>
<main>
<div id="container">
<new-note></new-note>
<notes></notes>
</div>
<layout-footer></layout-footer>
</main>
</div>
![Page 37: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/37.jpg)
@Component(
selector: 'notes',
templateUrl: 'notes_component.html',
directives: const [CORE_DIRECTIVES])
class NotesComponent {
List<Note> notes = [];
// We need to retrieve notes somehow}
notes_component.dart
![Page 38: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/38.jpg)
notes_component.dart
->
@Component(
selector: 'notes',
templateUrl: 'notes_component.html',
directives: const [CORE_DIRECTIVES])
class NotesComponent {
List<Note> notes = [];
// We need to retrieve notes somehow}
![Page 39: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/39.jpg)
<div id="notes">
<div *ngFor="let note of notes">
<h3 *ngIf="note.title?.isNotEmpty">
{{note.title}}
</h3>
<div>
<p>{{note.text}}</p>
...
</div>
...
</div>
</div>notes_component.html
![Page 40: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/40.jpg)
Sign in with Google
Read from realtime database
Save to realtime database
Upload to storage
![Page 41: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/41.jpg)
import 'package:firebase/firebase.dart';
...
var provider = new GoogleAuthProvider();
try {
await auth().signInWithPopup(provider);
} catch (e) {
print('Error in sign in with Google: $e');
}
signInAnonymously()
signInWithEmailAndPassword(email, pass)
...
![Page 42: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/42.jpg)
Structure the data{
"notes" : {
"-KUsbAq6445-ynO4lg6Z" : {
"img_url" : "dart.png",
"text" : "Is awesome!",
"title" : "Dart"
},
...
}
}
![Page 43: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/43.jpg)
List<Note> notes = [];
DatabaseReference dbRef = database().ref("notes");
dbRef.onChildAdded.listen((e) {
DataSnapshot data = e.snapshot;
var val = data.val();
Note note = new Note(val["text"], ...);
notes.insert(0, note);
});
onValue onChildRemoved
onChildMoved onChildChanged
![Page 44: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/44.jpg)
DatabaseReference dbRef = database().ref("notes");
try {
await dbRef
.push({"text": "New note!!!"})
.future;
} catch (e) {
print("Error in writing to database: $e");
}
![Page 45: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/45.jpg)
StorageReference stRef = storage().ref("notes");
File file = ...;
try {
UploadTaskSnapshot snapshot = await stRef
.child(file.name)
.put(file)
.future;
// Get url in snapshot.downloadURL
} catch (e) {
print("Error in uploading to storage: $e");
}
![Page 46: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/46.jpg)
Where should I put Firebase?
Component? Which?
Create a Service
![Page 47: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/47.jpg)
import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart';
...
@Injectable()
class FirebaseService {
List<Note> notes = [];
...
postItem(Note item) async { ... }
postItemImage(File file) async { ... }
signInWithGoogle() async { ... }
}firebase_service.dart
![Page 48: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/48.jpg)
import 'firebase_service.dart';
...
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ ... ],
providers: const [FirebaseService])
class AppComponent {
// Here is the implementation
}app_component.dart
![Page 49: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/49.jpg)
->
import 'firebase_service.dart';
...
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ ... ],
providers: const [FirebaseService])
class AppComponent {
// Here is the implementation
}app_component.dart
![Page 50: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/50.jpg)
@Component(...)
class NotesComponent implements OnInit {
FirebaseService service;
List<Note> notes = [];
NotesComponent(this.service);
@override
ngOnInit() {
notes = service.notes;
}
}notes_component.dart
![Page 51: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/51.jpg)
->
->
@Component(...)
class NotesComponent implements OnInit {
FirebaseService service;
List<Note> notes = [];
NotesComponent(this.service);
@override
ngOnInit() {
notes = service.notes;
}
}notes_component.dart
![Page 52: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/52.jpg)
<div id="notes">
<div *ngFor="let note of notes">
<h3 *ngIf="note.title?.isNotEmpty">
{{note.title}}
</h3>
<div>
<p>{{note.text}}</p>
...
</div>
...
</div>
</div>notes_component.html
![Page 53: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/53.jpg)
github.com/Janamou/firebase-demo-ng
angularnotesboard.firebaseapp.com
codelabs.developers.google.com/codelabs/angulardart-firebase-web-app/#0
+
![Page 54: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/54.jpg)
JavaScript
array
undefined
object functionnull
![Page 55: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/55.jpg)
firebase.google.com/docs/reference
`
https://firebase.google.com/docs/reference/js/
![Page 56: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/56.jpg)
@JS('firebase.app')
library firebase.app_interop;
import 'package:js/js.dart';
// Other imports...
package:js
firebase-dart/.../app_interop.dart
![Page 57: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/57.jpg)
firebase-dart/.../app_interop.dart
@JS('App')
abstract class AppJsImpl {
external String get name;
external FirebaseOptions get options;
external AuthJsImpl auth();
external DatabaseJsImpl database();
external PromiseJsImpl delete();
external StorageJsImpl storage([String url]);
}
package:js
![Page 58: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/58.jpg)
@JS('App')
abstract class AppJsImpl {
external String get name;
external FirebaseOptions get options;
external AuthJsImpl auth();
external DatabaseJsImpl database();
external PromiseJsImpl delete();
external StorageJsImpl storage([String url]);
}
firebase-dart/.../app_interop.dart
->
package:js
![Page 59: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/59.jpg)
@JS('firebase.database')
library firebase.database_interop;
...
@JS('Database')
abstract class DatabaseJsImpl {
external AppJsImpl get app;
...
external ReferenceJsImpl ref([String path]);
...
}firebase-dart/.../database_interop.dart
package:js
![Page 60: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/60.jpg)
Do I need to write this
manually?!TypeScript types definition file?
js_facade_gen library
![Page 61: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/61.jpg)
Wrapper around interop
Dart types
package:firebase
// How we use the library
try { await childRef.remove();} catch (e) { print("Error while deleting item, $e");}
![Page 62: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/62.jpg)
package:firebase
// Implementation in wrapper class
Future remove() => handleThenable(jsObject.remove());
Wrapper around interop
Dart types
Thenable to Future “magic”
![Page 63: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/63.jpg)
package:firebase
Wrapper around interop
Allow-interop solved
// Implementation in wrapper class
bool forEach(action(DataSnapshot snapshot)) { var actionWrap = allowInterop((d) => action(...)); return jsObject.forEach(actionWrap);}
![Page 64: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/64.jpg)
package:firebase
Wrapper around interop
Dart Map vs Js Objectnull, num, bool, String are okConversion through JSONFor Map or Iterable is js_util.dart
![Page 65: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/65.jpg)
+ =
![Page 66: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/66.jpg)
Productivity, performance, and stability
![Page 67: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/67.jpg)
“Backend without implementing backend”
![Page 68: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/68.jpg)
You can port any JavaScript library to Dart
![Page 69: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/69.jpg)
Thank You! Questions?
Jana Moudra @Janamou #dfua
![Page 70: How AngularDart & Firebase did an App together](https://reader031.vdocuments.us/reader031/viewer/2022020108/5a6ed2d47f8b9a87028b4ee3/html5/thumbnails/70.jpg)
● https://www.flickr.com/photos/150218480@N07/36351299136/, cc
● https://www.flickr.com/photos/7940758@N07/35070879422/, cc
● https://www.flickr.com/photos/99008530@N07/14918820302/, cc
● https://www.flickr.com/photos/98251082@N00/6507508041/, cc
Images