Building Simple Collaborative Online IDE with AngularFire and Firepad

Session นี้จะพาคุณสร้าง Simple Collaborative Online IDE สำหรับ Coding Interview แบบง่ายด้วยพลังของ AngularFire + Realtime Database + Firepad Firepad ใช้ Operational Transformation เป็น Technology ที่น่าสนใจสำหรับการสร้าง Collaboration Tools โดยทั่วไปแล้ว Collaborative Text Editor ส่วนใหญ่ต้องการ special code run ที่ Server แต่ด้วย Firepad ไม่จำเป็นต้องสร้าง backend ใช้เพียง Firebase Realtime Database สำหรับการทำ Data Synchronization ซึ่งสะดวกและง่ายกว่า

Transcript

1. 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
2. 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)
3. We are a remote team in Bangkok
4. #FirebaseDevDay2023 What are we going to build in simple version?
5. #FirebaseDevDay2023
6. #FirebaseDevDay2023
7. #FirebaseDevDay2023 What’re technologies we are going to use?
8. #FirebaseDevDay2023 AngularFire
9. #FirebaseDevDay2023
10. #FirebaseDevDay2023 Monaco Editor
11. #FirebaseDevDay2023 vm2
12. #FirebaseDevDay2023 Firebase Realtime Database
13. #FirebaseDevDay2023 Cloud Functions for Firebase
14. #FirebaseDevDay2023 Let’s go back to Firepad
15. #FirebaseDevDay2023
16. #FirebaseDevDay2023
17. #FirebaseDevDay2023
18. #FirebaseDevDay2023
19. #FirebaseDevDay2023
20. #FirebaseDevDay2023
21. #FirebaseDevDay2023
22. #FirebaseDevDay2023
23. #FirebaseDevDay2023
24. #FirebaseDevDay2023
25. #FirebaseDevDay2023
26. #FirebaseDevDay2023
27. #FirebaseDevDay2023 Let’s talk about Sandboxed VM
28. #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?
29. #FirebaseDevDay2023
30. #FirebaseDevDay2023
31. #FirebaseDevDay2023
32. #FirebaseDevDay2023 What Happens When a Container Calls Itself Recursively? Infinite Loop & ReDoS (Regular expression Denial of Service)
33. #FirebaseDevDay2023 What happen if vm container try to access, or run the host (ex. Remove database, expose password) Remote Code Execution
34. #FirebaseDevDay2023 vm2 is the answer
35. #FirebaseDevDay2023 My life is easier because of …
36. #FirebaseDevDay2023 ng new angular-firepad-1 (@angular/cli)
37. #FirebaseDevDay2023 ng add @angular/fire
38. #FirebaseDevDay2023 ng add @angular/material
39. #FirebaseDevDay2023 ng deploy -- hosting (@angular/fire)
40. #FirebaseDevDay2023 Overview Project bit.ly/AngularFirepad-VSCodeWeb
41. #FirebaseDevDay2023 Firebase Security Rules
42. #FirebaseDevDay2023
43. #FirebaseDevDay2023
44. #FirebaseDevDay2023
45. #FirebaseDevDay2023
46. #FirebaseDevDay2023
47. #FirebaseDevDay2023 Restrict Firebase API Key
48. #FirebaseDevDay2023 https://console.cloud.google.com/apis/credentials?project=angular-firepad-0
49. #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)
50. #FirebaseDevDay2023 OT behind Firepad
51. #FirebaseDevDay2023
52. #FirebaseDevDay2023
53. #FirebaseDevDay2023
54. #FirebaseDevDay2023
55. #FirebaseDevDay2023
56. #FirebaseDevDay2023 Thank you Building Simple Collaborative Online IDE With AngularFire and Firepad - Speaker Deck