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.

Kishikawa Katsumi

April 16, 2021
Tweet

More Decks by Kishikawa Katsumi

Other Decks in Programming

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