Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Simple Collaborative Online IDE With AngularFire and Firepad

Building Simple Collaborative Online IDE With AngularFire and Firepad

Building Simple Collaborative Online IDE
With AngularFire and Firepad

Siwat Kaolueng

April 01, 2023
Tweet

More Decks by Siwat Kaolueng

Other Decks in Technology

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