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
2. What is Web Playground?
4. Kotlin Web Playground https://play.kotlinlang.org/
5. TypeScript Web Playground https://www.typescriptlang.org/play
6. Go Web Playground https://play.golang.org/
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
9. Build Your Own Swift Web Playground
10. The Goal
11. Build Your Own Swift Web Playground The Goal
12. Overview
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
14. • Write code on the browser • Run the code • Show the result Build Your Own Swift Web Playground Overview Compile Run
15. Web Application Server
16. Build Your Own Swift Web Playground Web Application Server • Vapor https://vapor.codes/ • Leaf https://github.com/vapor/leaf
17. Build Your Own Swift Web Playground Vapor & Leaf
18. The Code Editor
19. • Syntax highlighting • Line numbers • Smart indentation • Auto complete • Show compiler errors & warnings Build Your Own Swift Web Playground The Code Editor
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/
21. Build Your Own Swift Web Playground The Code Editor
22. The Result View
23. Build Your Own Swift Web Playground The Result View • Xterm.js https://xtermjs.org/
24. Picker, Buttons and Other UI
25. • Bootstrap https://getbootstrap.com/ • Font Awesome https://fontawesome.com/ Build Your Own Swift Web Playground Picker, Buttons and Other UI
26. • Bootstrap https://getbootstrap.com/ • Font Awesome https://fontawesome.com/ Build Your Own Swift Web Playground Picker, Buttons and Other UI
27. Compile and Run
29. Build Your Own Swift Web Playground
30. Sandboxing
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.
32. Build Your Own Swift Web Playground Sandboxing Container Compile Run Container Compile Run Container Compile Run
33. Build Your Own Swift Web Playground Sandboxing
35. Limit Container Resources
36. Build Your Own Swift Web Playground Limit Container Resources
37. Multiple Swift Versions
39. External Libraries
41. Build Your Own Swift Web Playground External Libraries
42. Share & Embed
43. Build Your Own Swift Web Playground Share & Embed
44. Build Your Own Swift Web Playground Share & Embed
45. Build Your Own Swift Web Playground Share & Embed
46. https://async-await-in-swift.netlify.app/
47. API
48. Build Your Own Swift Web Playground API
49. Discord Bot Katsumi
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
51. Deploy & Update
52. Build Your Own Swift Web Playground Deploy & Update
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
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/