Building Simple Collaborative Online IDE With AngularFire and Firepad

Building Simple Collaborative Online IDE
With AngularFire and Firepad

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
   

   View Slide

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)
   

   View Slide

3. We are a
   remote team
   in Bangkok
   

   View Slide

4. #FirebaseDevDay2023
   What are we going to
   build in simple version?
   

   View Slide

5. #FirebaseDevDay2023
   

   View Slide

6. #FirebaseDevDay2023
   

   View Slide

7. #FirebaseDevDay2023
   What’re technologies
   we are going to use?
   

   View Slide

8. #FirebaseDevDay2023
   AngularFire
   

   View Slide

9. #FirebaseDevDay2023
   

   View Slide

10. #FirebaseDevDay2023
    Monaco Editor
    

    View Slide

11. #FirebaseDevDay2023
    vm2
    

    View Slide

12. #FirebaseDevDay2023
    Firebase Realtime Database
    

    View Slide

13. #FirebaseDevDay2023
    Cloud Functions for Firebase
    

    View Slide

14. #FirebaseDevDay2023
    Let’s go back to
    Firepad
    

    View Slide

15. #FirebaseDevDay2023
    

    View Slide

16. #FirebaseDevDay2023
    

    View Slide

17. #FirebaseDevDay2023
    

    View Slide

18. #FirebaseDevDay2023
    

    View Slide

19. #FirebaseDevDay2023
    

    View Slide

20. #FirebaseDevDay2023
    

    View Slide

21. #FirebaseDevDay2023
    

    View Slide

22. #FirebaseDevDay2023
    

    View Slide

23. #FirebaseDevDay2023
    

    View Slide

24. #FirebaseDevDay2023
    

    View Slide

25. #FirebaseDevDay2023
    

    View Slide

26. #FirebaseDevDay2023
    

    View Slide

27. #FirebaseDevDay2023
    Let’s talk about
    Sandboxed VM
    

    View Slide

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?
    

    View Slide

29. #FirebaseDevDay2023
    

    View Slide

30. #FirebaseDevDay2023
    

    View Slide

31. #FirebaseDevDay2023
    

    View Slide

32. #FirebaseDevDay2023
    What Happens When a Container
    Calls Itself Recursively?
    Infinite Loop & ReDoS
    (Regular expression Denial
    of Service)
    

    View Slide

33. #FirebaseDevDay2023
    What happen if vm container try to
    access, or run the host
    (ex. Remove database, expose
    password)
    Remote Code Execution
    

    View Slide

34. #FirebaseDevDay2023
    vm2 is the
    answer
    

    View Slide

35. #FirebaseDevDay2023
    My life is easier
    because of …
    

    View Slide

36. #FirebaseDevDay2023
    ng new angular-firepad-1 (@angular/cli)
    

    View Slide

37. #FirebaseDevDay2023
    ng add @angular/fire
    

    View Slide

38. #FirebaseDevDay2023
    ng add @angular/material
    

    View Slide

39. #FirebaseDevDay2023
    ng deploy -- hosting (@angular/fire)
    

    View Slide

40. #FirebaseDevDay2023
    Overview Project
    bit.ly/AngularFirepad-VSCodeWeb
    

    View Slide

41. #FirebaseDevDay2023
    Firebase Security Rules
    

    View Slide

42. #FirebaseDevDay2023
    

    View Slide

43. #FirebaseDevDay2023
    

    View Slide

44. #FirebaseDevDay2023
    

    View Slide

45. #FirebaseDevDay2023
    

    View Slide

46. #FirebaseDevDay2023
    

    View Slide

47. #FirebaseDevDay2023
    Restrict
    Firebase API Key
    

    View Slide

48. #FirebaseDevDay2023
    https://console.cloud.google.com/apis/credentials?project=angular-firepad-0
    

    View Slide

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)
    

    View Slide

50. #FirebaseDevDay2023
    OT behind Firepad
    

    View Slide

51. #FirebaseDevDay2023
    

    View Slide

52. #FirebaseDevDay2023
    

    View Slide

53. #FirebaseDevDay2023
    

    View Slide

54. #FirebaseDevDay2023
    

    View Slide

55. #FirebaseDevDay2023
    

    View Slide

56. #FirebaseDevDay2023
    Thank you
    Building Simple Collaborative Online IDE With AngularFire and Firepad - Speaker Deck
    

    View Slide