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

Build Swift Web Playground

 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.

9bf923e39671cde83584e3e926296c13?s=128

Kishikawa Katsumi

April 16, 2021
Tweet

Transcript

  1. Katsumi Kishikawa Build Swift Web Playground Swift Heroes 2021

  2. What is Web Playground?

  3. None
  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/

  7. None
  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

  28. None
  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

  34. None
  35. Limit Container Resources

  36. Build Your Own Swift Web Playground Limit Container Resources

  37. Multiple Swift Versions

  38. None
  39. External Libraries

  40. None
  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

  53. None
  54. None
  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/