Slide 1
Slide 1 text
Senior Software Engineer at EarnIn
Siwat Kaolueng
Firebase Dev Day 2023
GDG Bangkok
Firebase Thailand
Organized by
Building Simple
Collaborative Online
IDE with AngularFire
and Firepad
Slide 2
Slide 2 text
Siwat Kaolueng
(Jame)
Senior Software Engineer at EarnIn
Interested in Web Performance, Web Standards,
Collaboration Tools, Local-first software, Operational
Transformation (OT),
Conflict Free Replicated Data Types (CRDTs)
Slide 3
Slide 3 text
We are a
remote team
in Bangkok
Slide 4
Slide 4 text
#FirebaseDevDay2023
What are we going to
build in simple version?
Slide 5
Slide 5 text
#FirebaseDevDay2023
Slide 6
Slide 6 text
#FirebaseDevDay2023
Slide 7
Slide 7 text
#FirebaseDevDay2023
What’re technologies
we are going to use?
Slide 8
Slide 8 text
#FirebaseDevDay2023
AngularFire
Slide 9
Slide 9 text
#FirebaseDevDay2023
Slide 10
Slide 10 text
#FirebaseDevDay2023
Monaco Editor
Slide 11
Slide 11 text
#FirebaseDevDay2023
vm2
Slide 12
Slide 12 text
#FirebaseDevDay2023
Firebase Realtime Database
Slide 13
Slide 13 text
#FirebaseDevDay2023
Cloud Functions for Firebase
Slide 14
Slide 14 text
#FirebaseDevDay2023
Let’s go back to
Firepad
Slide 15
Slide 15 text
#FirebaseDevDay2023
Slide 16
Slide 16 text
#FirebaseDevDay2023
Slide 17
Slide 17 text
#FirebaseDevDay2023
Slide 18
Slide 18 text
#FirebaseDevDay2023
Slide 19
Slide 19 text
#FirebaseDevDay2023
Slide 20
Slide 20 text
#FirebaseDevDay2023
Slide 21
Slide 21 text
#FirebaseDevDay2023
Slide 22
Slide 22 text
#FirebaseDevDay2023
Slide 23
Slide 23 text
#FirebaseDevDay2023
Slide 24
Slide 24 text
#FirebaseDevDay2023
Slide 25
Slide 25 text
#FirebaseDevDay2023
Slide 26
Slide 26 text
#FirebaseDevDay2023
Slide 27
Slide 27 text
#FirebaseDevDay2023
Let’s talk about
Sandboxed VM
Slide 28
Slide 28 text
#FirebaseDevDay2023
Sandboxing untrusted code is useful when you have to rely on third-party
developed software where you don't have access to source code, or you
don't have resources to perform a source code assessment. Sandboxing
can also be useful as an additional security boundary for your own code.
Sandboxed untrusted code?
Slide 29
Slide 29 text
#FirebaseDevDay2023
Slide 30
Slide 30 text
#FirebaseDevDay2023
Slide 31
Slide 31 text
#FirebaseDevDay2023
Slide 32
Slide 32 text
#FirebaseDevDay2023
What Happens When a Container
Calls Itself Recursively?
Infinite Loop & ReDoS
(Regular expression Denial
of Service)
Slide 33
Slide 33 text
#FirebaseDevDay2023
What happen if vm container try to
access, or run the host
(ex. Remove database, expose
password)
Remote Code Execution
Slide 34
Slide 34 text
#FirebaseDevDay2023
vm2 is the
answer
Slide 35
Slide 35 text
#FirebaseDevDay2023
My life is easier
because of …
Slide 36
Slide 36 text
#FirebaseDevDay2023
ng new angular-firepad-1 (@angular/cli)
Slide 37
Slide 37 text
#FirebaseDevDay2023
ng add @angular/fire
Slide 38
Slide 38 text
#FirebaseDevDay2023
ng add @angular/material
Slide 39
Slide 39 text
#FirebaseDevDay2023
ng deploy -- hosting (@angular/fire)
Slide 40
Slide 40 text
#FirebaseDevDay2023
Overview Project
bit.ly/AngularFirepad-VSCodeWeb
Slide 41
Slide 41 text
#FirebaseDevDay2023
Firebase Security Rules
Slide 42
Slide 42 text
#FirebaseDevDay2023
Slide 43
Slide 43 text
#FirebaseDevDay2023
Slide 44
Slide 44 text
#FirebaseDevDay2023
Slide 45
Slide 45 text
#FirebaseDevDay2023
Slide 46
Slide 46 text
#FirebaseDevDay2023
Slide 47
Slide 47 text
#FirebaseDevDay2023
Restrict
Firebase API Key
Slide 48
Slide 48 text
#FirebaseDevDay2023
https://console.cloud.google.com/apis/credentials?project=angular-firepad-0
Slide 49
Slide 49 text
#FirebaseDevDay2023
Demo
bit.ly/angular-firepad-0
(I did change a plan to spark plan, The demo is only work for collaborative editor.
If you want to the run command to work, you need to use your own Firebase API Key)
Slide 50
Slide 50 text
#FirebaseDevDay2023
OT behind Firepad
Slide 51
Slide 51 text
#FirebaseDevDay2023
Slide 52
Slide 52 text
#FirebaseDevDay2023
Slide 53
Slide 53 text
#FirebaseDevDay2023
Slide 54
Slide 54 text
#FirebaseDevDay2023
Slide 55
Slide 55 text
#FirebaseDevDay2023
Slide 56
Slide 56 text
#FirebaseDevDay2023
Thank you
Building Simple Collaborative Online IDE With AngularFire and Firepad - Speaker Deck