Tweet
Tweet

Slide 1

Slide 1 text

Katsumi Kishikawa Build Swift Web Playground Swift Heroes 2021

Slide 2

Slide 2 text

What is Web Playground?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Build Your Own Swift Web Playground

Slide 10

Slide 10 text

The Goal

Slide 11

Slide 11 text

Build Your Own Swift Web Playground The Goal

Slide 12

Slide 12 text

Overview

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Web Application Server

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Build Your Own Swift Web Playground Vapor & Leaf

Slide 18

Slide 18 text

The Code Editor

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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/

Slide 21

Slide 21 text

Build Your Own Swift Web Playground The Code Editor

Slide 22

Slide 22 text

The Result View

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Picker, Buttons and Other UI

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Compile and Run

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Build Your Own Swift Web Playground

Slide 30

Slide 30 text

Sandboxing

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Build Your Own Swift Web Playground Sandboxing

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Limit Container Resources

Slide 36

Slide 36 text

Build Your Own Swift Web Playground Limit Container Resources

Slide 37

Slide 37 text

Multiple Swift Versions

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

External Libraries

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Build Your Own Swift Web Playground External Libraries

Slide 42

Slide 42 text

Share & Embed

Slide 43

Slide 43 text

Build Your Own Swift Web Playground Share & Embed

Slide 44

Slide 44 text

Build Your Own Swift Web Playground Share & Embed

Slide 45

Slide 45 text

Build Your Own Swift Web Playground Share & Embed

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

API

Slide 48

Slide 48 text

Build Your Own Swift Web Playground API

Slide 49

Slide 49 text

Discord Bot Katsumi

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Deploy & Update

Slide 52

Slide 52 text

Build Your Own Swift Web Playground Deploy & Update

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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/