How AngularDart & Firebase did an App together

How
AngularDart & Firebase
did an App together
Jana Moudra @Janamou #dfua

JavaScript, TypeScript, Dart, Elm,...
React, Angular, Ember.js,
Preact, Vue.js, …
?

dartlang.org
For building
Web browser, server,
command line, and
mobile apps

flutter.io
Flutter talk
Saturday, 10:10
For building
Web browser, server,
command line, and
mobile apps

But hey, isn’t Dart dead?
NO

Sunday night...
Dart 2.0 is close...

Easy to learn
Optionally vs statically typed
Compiles to JavaScript
Tons of libraries in the SDK

main() {
print("Hello #DFUA 2017!");
}

// Is null no undefined
var sum;
// Tools warn you
int count = "Jana";

// Cascade operator
Dog dog = new Dog()
..name = "Andy"
..age = 8;

this is always this
no need to fix it!

+ =
webdev.dartlang.org/angular
? ??
?
?

Google
is using it!

AdWords, AdSense, AdMob
Millions of lines of code
25-100% increase in development speed
at Google

Simple & reusable
Not only view
Services Router
Directives HTTP
Pipes Forms
Components Testing

Needed
Lots of implementation
Database, File Upload, User
accounts, Anonymous user, OAuth,
Hosting ...

Realtime Database
Authentication
Cloud Storage
Messaging
Hosting
... firebase.google.com

DEMO
TIME

Include Js SDK
package:firebase
package:angular
+

<!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

->
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>

import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ ... ]
)
class AppComponent {
// Here is the implementation
}
app_component.dart

app_component.dart
->
@Component(
selector: 'my-app',
directives: const [ ... ]
)
}

<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

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>

@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

->
@Component(
selector: 'notes',
templateUrl: 'notes_component.html',
directives: const [CORE_DIRECTIVES])
class NotesComponent {
// We need to retrieve notes somehow
}

<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

Sign in with Google
Read from realtime database
Save to realtime database
Upload to storage

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)
...

Structure the data
{
"notes" : {
"-KUsbAq6445-ynO4lg6Z" : {
"img_url" : "dart.png",
"text" : "Is awesome!",
"title" : "Dart"
},
...
}
}

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

DatabaseReference dbRef = database().ref("notes");
try {
await dbRef
.push({"text": "New note!!!"})
.future;
} catch (e) {
print("Error in writing to database: $e");
}

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");
}

Where should I put Firebase?
Component? Which?
Create a Service

import 'package:firebase/firebase.dart';
...
@Injectable()
class FirebaseService {
...
postItem(Note item) async { ... }
postItemImage(File file) async { ... }
signInWithGoogle() async { ... }
}
firebase_service.dart

import 'firebase_service.dart';
...
@Component(
selector: 'my-app',
directives: const [ ... ],
providers: const [FirebaseService])
}
app_component.dart

->
import 'firebase_service.dart';
...
@Component(
selector: 'my-app',
directives: const [ ... ],
providers: const [FirebaseService])
}
app_component.dart

@Component(...)
class NotesComponent implements OnInit {
FirebaseService service;
NotesComponent(this.service);
@override
ngOnInit() {
notes = service.notes;
}
}

->
->
@Component(...)
class NotesComponent implements OnInit {
FirebaseService service;
NotesComponent(this.service);
@override
ngOnInit() {
notes = service.notes;
}
}

github.com/Janamou/firebase-demo-ng
angularnotesboard.firebaseapp.com
codelabs.developers.google.com/codelab
s/angulardart-firebase-web-app/#0
+

JavaScript
array
undefined
object
function
null

firebase.google.com/docs/reference
`
https://firebase.google.com/docs/reference/js/

@JS('firebase.app')
library firebase.app_interop;
import 'package:js/js.dart';
// Other imports...
package:js
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

@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

@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

Do I need to write this
manually?!
TypeScript types definition file?
js_facade_gen library

Wrapper around interop
Dart types
package:firebase
// How we use the library
try {
await childRef.remove();
} catch (e) {
print("Error while deleting item, $e");
}

package:firebase
// Implementation in wrapper class
Future remove() =>
handleThenable(jsObject.remove());
Dart types
Thenable to Future “magic”

package:firebase
Allow-interop solved
// Implementation in wrapper class
bool forEach(action(DataSnapshot snapshot)) {
var actionWrap =
allowInterop((d) => action(...));
return jsObject.forEach(actionWrap);
}

package:firebase
Dart Map vs Js Object
null, num, bool, String are ok
Conversion through JSON
For Map or Iterable is js_util.dart

Productivity, performance,
and stability

“Backend without
implementing backend”

You can port any JavaScript
library to Dart

Thank You!
Questions?

● https://www.flickr.com/photos/150218480
@N07/36351299136/, cc
● https://www.flickr.com/photos/7940758@
N07/35070879422/, cc
@N07/14918820302/, cc
@N00/6507508041/, cc
Images

How AngularDart & Firebase did an App together

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How AngularDart & Firebase did an App together

Similar to How AngularDart & Firebase did an App together (20)

More from Jana Moudrá

More from Jana Moudrá (10)

Recently uploaded

Recently uploaded (20)

How AngularDart & Firebase did an App together