Build Swift Web Playground

Playground (a.k.a REPL) is one of the most useful tools for understanding a programming language. Swift provides a very easy to use playground that makes it very easy for us to try out Swift code and see the results.

If you look at other programming languages, most of the modern languages have some kind of playground mechanism. In addition, there are many languages that provide a web playground.

The web playground gives us many more power. It can be used to try out an idea on your smartphone, to share problematic code and execution results with others for discussion, or to provide "working documentation" where you can run sample code for documentation.

Unfortunately, the official Swift web playground is not yet available, but you can use server-side Swift and web technologies to create your own web-powered Swift Playground!

Here is Swift web playground I created and host => https://swiftfiddle.com/ .

I usually work in iOS and macOS programming, so the experience with server-side Swift and web programming are very interesting to me. I'd like to see more community-based Swift execution environments like this one, so I'd like to share the insights I've gained from building this playground, such as how to sandboxing execution, limit resources and switch Swift versions etc.

Transcript

1. Katsumi Kishikawa
   Build Swift Web Playground
   Swift Heroes 2021
   

   View Slide

2. What is Web Playground?
   

   View Slide

3. View Slide

4. Kotlin Web Playground
   https://play.kotlinlang.org/
   

   View Slide

5. TypeScript Web Playground
   https://www.typescriptlang.org/play
   

   View Slide

6. Go Web Playground
   https://play.golang.org/
   

   View Slide

7. View Slide

8. Build Swift Web Playground
   Agenda
   • What is Online Playground
   
   • Build Your Own Swift Web Playground
   
   • Frontend & Backend
   
   • Sandboxing
   
   • Support Multiple Swift Versions
   
   • Support External Libraries
   
   • Share & Embed
   
   • API
   
   • Deploy & Update
   
   • Wrap up
   

   View Slide

9. Build Your Own Swift Web
   Playground
   

   View Slide

10. The Goal
    

    View Slide

11. Build Your Own Swift Web Playground
    The Goal
    

    View Slide

12. Overview
    

    View Slide

13. • Write code on the browser
    
    • Send the code to a server
    
    • Run the code
    
    • Return the result
    
    • Show the result
    Build Your Own Swift Web Playground
    Overview
    

    View Slide

14. • Write code on the browser
    
    • Run the code
    
    • Show the result
    Build Your Own Swift Web Playground
    Overview
    Compile
    Run
    

    View Slide

15. Web Application Server
    

    View Slide

16. Build Your Own Swift Web Playground
    Web Application Server
    • Vapor https://vapor.codes/
    
    • Leaf https://github.com/vapor/leaf
    

    View Slide

17. Build Your Own Swift Web Playground
    Vapor & Leaf
    

    View Slide

18. The Code Editor
    

    View Slide

19. • Syntax highlighting
    
    • Line numbers
    
    • Smart indentation
    
    • Auto complete
    
    • Show compiler errors & warnings
    Build Your Own Swift Web Playground
    The Code Editor
    

    View Slide

20. Build Your Own Swift Web Playground
    The Code Editor
    • Ace https://ace.c9.io/
    • CodeMirror https://codemirror.net/
    
    • Monaco Editor https://microsoft.github.io/monaco-editor/
    

    View Slide

21. Build Your Own Swift Web Playground
    The Code Editor
    

    View Slide

22. The Result View
    

    View Slide

23. Build Your Own Swift Web Playground
    The Result View
    • Xterm.js https://xtermjs.org/
    

    View Slide

24. Picker, Buttons and Other UI
    

    View Slide

25. • Bootstrap https://getbootstrap.com/
    
    • Font Awesome https://fontawesome.com/
    Build Your Own Swift Web Playground
    Picker, Buttons and Other UI
    

    View Slide

26. • Bootstrap https://getbootstrap.com/
    
    • Font Awesome https://fontawesome.com/
    Build Your Own Swift Web Playground
    Picker, Buttons and Other UI
    

    View Slide

27. Compile and Run
    

    View Slide

28. View Slide

29. Build Your Own Swift Web Playground
    

    View Slide

30. Sandboxing
    

    View Slide

31. Build Your Own Swift Web Playground
    Sandboxing
    • The sandbox isolates the environment in which the code is run.
    
    • The sandbox to run untrusted code and return the output.
    
    • The sandbox restricts the resources that the untrusted code can access to
    protect the host.
    
    • The sandbox safely stops non-terminating programs.
    

    View Slide

32. Build Your Own Swift Web Playground
    Sandboxing
    Container
    Compile
    Run
    Container
    Compile
    Run
    Container
    Compile
    Run
    

    View Slide

33. Build Your Own Swift Web Playground
    Sandboxing
    

    View Slide

34. View Slide

35. Limit Container Resources
    

    View Slide

36. Build Your Own Swift Web Playground
    Limit Container Resources
    

    View Slide

37. Multiple Swift Versions
    

    View Slide

38. View Slide

39. External Libraries
    

    View Slide

40. View Slide

41. Build Your Own Swift Web Playground
    External Libraries
    

    View Slide

42. Share & Embed
    

    View Slide

43. Build Your Own Swift Web Playground
    Share & Embed
    

    View Slide

44. Build Your Own Swift Web Playground
    Share & Embed
    

    View Slide

45. Build Your Own Swift Web Playground
    Share & Embed
    

    View Slide

46. https://async-await-in-swift.netlify.app/
    

    View Slide

47. API
    

    View Slide

48. Build Your Own Swift Web Playground
    API
    

    View Slide

49. Discord Bot
    Katsumi
    
    
    

    View Slide

50. Discord Bot
    • Compile and execute code snippets posted on Discord and reply with results.
    
    • Do not need to run the posted code in your hand to see how it works.
    
    • It's a great way to ask questions and discuss strange behavior.
    
    • The Swift community in Japan is using these useful bots on Discord every
    day.

    https://discord.gg/4Scjz4J
    

    View Slide

51. Deploy & Update
    

    View Slide

52. Build Your Own Swift Web Playground
    Deploy & Update
    

    View Slide

53. View Slide

54. View Slide

55. Other Swift Web Playground
    • Replit https://replit.com/
    
    • Wandbox https://wandbox.org/
    
    • Online Swift Playground http://online.swiftplayground.run/
    
    • iSwift https://iswift.org/playground
    

    View Slide

56. Wrap up
    • Swift does not provide an o
    ffi
    cial Web Playground.
    
    • But you can create your own.
    
    • Web programming and server-side programming in Swift is easier than you
    think.
    
    • If Swift can be easily run on the web, it helps much more people will start
    learning Swift.
    
    • Hopefully, many more excellent Swift Web Playgrounds will be created.
    
    • Visit swift
    fi
    ddle.com and github.com/kishikawakatsumi/swift-playground/
    

    View Slide