It's my great pleasure to talk about a topic that I'm enthusiastic about. I'm not a developer of the Shiny framework and I'm not a WebAssembly developer, but I recently discovered these tools, and I think they are amazing.

There are so many fun things that you can do with them. So this is why I decided to submit a talk to the conference to discuss it and hopefully give other people some ideas.

But let's set the stage. Let's start with a few pain points that typically arise in web development or in app development with Python.

Traditional web apps usually rely on some sort of server backend.

Flask, Django, and FastAPI are probably frameworks that you are familiar with.

These are also frameworks that I have played around with. I'm not an expert in any of those, so please don't ask any questions about them.

On the front-end layer, you could either create your own JavaScript front end if you are a web developer, or you can use Python frameworks like Streamlit or Dash.

The problem, at least for me, is that I'm an experienced R user and I've used the Shiny framework.

When I had to create Python web apps, I was surprised that I had to deal with all sorts of state management and take care of caching, and things can get complicated quite quickly—complicated and annoying.

Another thing to keep in mind is that usually these apps, particularly if they have multiple components, involve quite a bit of deployment complexity.

Now, the tools that I want to show you today, they tackle these issues.

Let's start with WebAssembly. Maybe some of you have heard about it before. Um, it gives an obscure definition of WebAssembly on the website.

It says it's a binary instruction format for a stack-based virtual machine.

So, I don't have a computer science background, so I have no idea what this means, but in practice, how I think about it, it means that WebAssembly can run compiled code in the browser.

So, this is pretty cool. So your Chrome, your Safari, your Edge can run C, C++, Rust, or Python code.

Also, people are working on this and it's near-native performance.

So we're not losing anything there. And the cool thing, if you think about web development, this unlocks a new area where we can actually build a web app that runs completely in the browser.

So you don't need a hosted backend server.

So this sounds like too good to be true and yes, it is. So there are some caveats and I will talk about them a bit later.

But if we can create apps without a dedicated backend server, we can basically deploy apps as static websites.

So I will show you an example where we do exactly this. I will give you an app that is statically deployed using GitHub Pages that you can try out.

So if you have used GitHub Pages or Netlify, this means you can just deploy a Python web app that uses data, has some interface, and people can play around with it.

You have basically no maintenance costs. You don't have to pay for a server or anything.

So that's pretty cool, I think. And I will talk about use cases and give you some ideas later.

In addition to WebAssembly, there are two more concepts that I want to introduce: Shiny and Shiny Live. So for those of you who have experience in R, you're probably familiar with the Shiny framework.

That's the go-to framework for building dashboards or apps in R.

Recently, the Posit company started translating the Shiny framework to Python. But the cool thing is it's in pure Python.

This is very useful when we talk about deploying things using WebAssembly.

The cool thing about Shiny, and I will give you a code example that illustrates this, is just why I think Shiny is cool.

First, you don't have to take care of state management. If you have written callback functions before, you don't have to do this.

Frankly, that's something I really struggled with in Python. So this is why I usually went back to R to create a simple dashboard.

You get an automatic reactive execution engine. As you will see in the example app, if we change the inputs, Shiny takes care of which elements should be re-rendered.

You've probably used Streamlit before, right?

And if you change an input in Streamlit, the whole site renders again because Streamlit is creating an HTML file and it's doing it all over again whenever you change an input.

And this feels like, I don't know, 1990s internet. But with Shiny provides an automatic execution engine, so it takes care of these issues for you.

[snorts] You also get full support for CSS and JavaScript customization.

As an independent consultant, I build dashboards for a couple of clients and you can spend a lot of time customizing dashboards using CSS and JavaScript.

The good thing is that at least the front-end and back end components are taken care of by Shiny, and you can layer your customization on top.

So this was Shiny, right? Shiny is about building web apps.

We'll give you an example in a minute. Shiny Live is just a framework that allows you to run Shiny apps entirely in the browser.

What it does is take your Shiny app and provide instructions on how you can run this using WebAssembly.

Maybe you've heard about Pyodide; that's the leading framework for WebAssembly in Python.

Essentially, it's a port of Cython to WebAssembly, so probably one could give a whole talk about Pyodide alone.

I think it's an amazing and exciting project.

The cool thing is that with Shiny Live, you don't have to worry about the nitty-gritty details here.

You can be assured that Shiny Live takes care of all the Pyodide organization for you.

Just to illustrate the concept: in a traditional Shiny app, if I create a Shiny app or any app in Python, usually You have a Python process that runs on a server, and you have a couple of clients that access the server, and the server executes the code.

The server takes care of maybe load balancing, caching, all these things.

And for data apps, of course, it also runs the code, right? So if you're doing some aggregations in response to changes in the UI, then the SH server is taking care of this.

Now with Shinylive, how we can think about it is that instead of, right, the server doing all these computations, you have little Python processes running on the client side that do all the work.

But we will come back to a similar image like this. It's not like we can get rid of the server for all the things that we want to do with web apps.

Um, of course, so things that might come to your mind. Oh, how, Kristoff, but how do you handle authentication?

How do you handle secrets and stuff like this? We'll get to this. Let's take a look at a code example. So for those of you who are familiar with the R Shiny framework, this will be very familiar, and for those of you who are new to this, I will walk through it.

So I tried to make a very, very simple app. So first we talk about the code we will revisit this later, this example, because we will extend it, but we will also look at the live app.

I use NumPy because I want to plot some numbers, a vector of numbers, and I use the Shiny library.

In particular, there are only three functions that I need: the app, render, and UI. And this is how you Typically, I approach a Shiny app in a very natural way, coming from art.

But first, you think about how to define the UI.

What are the components? What is the layout that I want to use? A simple layout could be a page with a sidebar, right?

So we use the UI to define the page sidebar, and then you would, for instance, introduce a sidebar with a slider. As you can see, the Shiny framework provides some UI components such as page layouts and, for instance, sliders, but you also get text boxes, checkboxes, radio buttons, and things like that.

They even have a chat interface if you want to build an LLM into your Shiny app. In the slider, I would just define what the slider is called, the name of the object, and the minimum, maximum, and starting value.

What you would also do in the UI is define output components. Here, I want to create a histogram using this input slider that picks the number of bins as a UI input.

So you could define the output as a plot, which is a histogram, but this could also be an output table, output text, output HTML, or something like that.

So different outputs that you tell Shiny what the type is, and it takes care of the rendering.

I will also include this title: 'Hello PyData Berlin.' Once you have taken care of the UI, you would define the server logic.

You could do this in the same script as I do here, right?

That’s the same app.py file, but you can, of course, split it up across multiple scripts.

as you would usually do. And if it's a bigger project, maybe you would even isolate different server components, different UI components, right?

And then assemble them in one main script. But what happens here? You define this server function.

You use the decorators that are provided with Shiny. Essentially, you can think about decorators as they wrap the functions that come afterwards in the output or render plot function.

At least intuitively, that's what's happening.

And what you basically do here is, right, you have the output on top; we have defined our histogram output. So in the server, we have to define what this histogram looks like, how it is created, and render plot also indicates that you're actually rendering something.

So Matplotlib or Seaborn or something like that is used, and I would define a histogram as a function here.

So I'm using NumPy to define a random seed, and then just in line 19 you see I'm creating a vector of random numbers using NumPy and then just plot the histogram.

Also, very importantly here, as bins we have input n, so this is exactly the n that we defined above in the slider, and if you want to start this app, you would just run this.

So app, the app function uses the app UI and the server as input.

So this is a Shiny app, right? So what you define in the Python code is what should happen?

What does Shiny Live do? Shiny Live exports this app to something that can be executed using WebAssembly.

So if you run a Shiny Live export app to a docs folder in the terminal, what you will get are a couple of files.

So in the docs folder, you will get an app JSON. So that's basically the logic of the app, the whole app serialized to a JSON.

We will look at this again later. An index.html. This is just a simple web page that displays the application.

So there's not much happening here. I'm going to skip the edit folder because you can also get an editor view of an application.

But crucially, there's a Shiny Live service worker and there are also Pyodide files. So what the Shiny Live service worker does is take care of what do I need from Pyodide and what do I execute in the browser, and Pyodide basically delivers all the libraries that you want to use.

Okay, a few more things before we look at the live app, so you can already grab your phone.

The script that I've shown you before, the app.py, if you run Shiny Live, it is encoded in this app JSON.

So this is a bit abbreviated here. I cut this off because, I mean, it's just right. It puts all the Python script into one line.

It's very long. But as you can see, what happens at the top is it imports matplotlib as plt, import numpy.

So this is exactly just the Python code, right? So the first thing you might realize Here, oh my god, everything I put in my Python script is in this app's JSON, right?

And if you deploy this as a public website, then this will be public.

Keep that in mind. But deploying Shiny apps, uh, Shiny Live apps as static websites is super, super simple. So if you have deployed something with GitHub Pages before, um, it's just the same.

You just point GitHub Pages to a docs folder. Not going to go into details here.

I'm just going to refer to a guide, um, a walkthrough by Ramy Krispin, who has done some work on this.

But again, it's very simple. GitHub Pages has become very, very easy to navigate these days.

Now I invite you to test the deployed Shiny app for those of you. So what you will find is that it should work on your phone.

If it doesn't work on your phone, please approach me afterwards because I really want to find out why it's not working.

So if you start the app, maybe... So what happens now is that your browser has to download the app files.

It's taking some time, probably because we're all connected to the same Wi-Fi. [laughter] And what your browser does is it starts up a Python session, runs the app, and should host it in your, uh, so you should see a similar simulation icon like this, right?

It's a super simple Shiny app. So there is a slider here.

If you change it, the histogram changes because you vary the number of bins. So that's not too bad. I think it's very easy to create something like that.

Building Reactive Data Apps with Shinylive and WebAssembly

PyData is an educational program of NumFOCUS, a 501(c)3 non-profit organization in the United States. PyData provides a forum for the international community of users and developers of data analysis tools to share ideas and learn from each other. The global PyData network promotes discussion of best practices, new approaches, and emerging technologies for data management, processing, analytics, and visualization. PyData communities approach data science using many languages, including (but not limited to) Python, Julia, and R.

We aim to be an accessible, community-driven conference, with novice to advanced level presentations. PyData tutorials and talks bring attendees the latest project features along with cutting-edge use cases.

PyData

Shinylive와 WebAssembly는 기존 웹 앱의 서버 백엔드 의존성 및 배포 복잡성을 해결하며, Python 코드를 브라우저에서 거의 네이티브 성능으로 실행하여 정적 웹사이트 배포를 가능하게 합니다.

Shinylive는 Python Shiny 앱을 브라우저에서 완전히 실행할 수 있게 하며, 자동 반응형 실행 엔진으로 상태 관리 및 HTML 재렌더링 문제를 해결하고, CSS/JavaScript 사용자 정의를 지원하여 대시보드 개발을 용이하게 합니다.

작은 데이터 세트나 간단한 대시보드, 교육/데모 환경에는 Shinylive가 적합하지만, 대규모 데이터 처리, 실시간 스트리밍, 복잡한 인증이 필요한 경우에는 FastAPI와 같은 백엔드와 연동하는 하이브리드 접근 방식이 필요합니다.

발표자가 기존 웹 앱 개발의 문제점으로 언급한 서버 백엔드 의존성, 배포 복잡성, 상태 관리의 어려움은 Shiny 및 WebAssembly를 활용하여 어떻게 해결될 수 있나요?

WebAssembly가 브라우저에서 컴파일된 코드를 실행할 수 있게 함으로써 어떤 새로운 웹 개발 방식이 가능해지며, 기존 방식과 비교했을 때의 주요 장점은 무엇인가요?

Shiny Live를 사용하여 Shiny 앱을 배포하는 과정에서 app.py 파일이 app JSON으로 인코딩될 때 발생할 수 있는 잠재적인 보안 문제는 무엇이며, 이를 해결하기 위한 제안된 접근 방식은 무엇인가요?

Shiny Live 앱에 데이터를 포함할 때 Parquet 형식을 사용하는 것이 권장되는 이유는 무엇이며, 데이터가 공개될 경우의 단점은 무엇인가요?

Shiny Live를 활용한 애플리케이션 개발 시 브라우저 메모리 및 성능 제약(예: 4GB 메모리 제한, 단일 코어 사용)이 어떤 종류의 앱에 영향을 미치며, Shiny Live의 이상적인 사용 사례는 무엇인가요?

제가 열정적으로 이야기할 수 있는 주제에 대해 말씀드리게 되어 매우 기쁩니다. 저는 Shiny 프레임워크 개발자도 아니고 WebAssembly 개발자도 아니지만, 최근에 이러한 도구를 발견했고 정말 훌륭하다고 생각합니다.

이 도구들로 할 수 있는 재미있는 일들이 정말 많습니다. 그래서 저는 이 컨퍼런스에 강연을 제출하여 이 주제를 논의하고 다른 사람들에게도 몇 가지 아이디어를 제공하고자 했습니다.

하지만 배경 설명을 좀 하겠습니다. 일반적으로 웹 개발이나 Python으로 앱을 개발할 때 발생하는 몇 가지 문제점부터 시작해 보겠습니다.

기존 웹 앱은 일반적으로 서버 백엔드에 의존합니다.

Flask, Django, FastAPI는 아마 여러분이 익숙한 프레임워크일 것입니다.

이러한 프레임워크는 저도 사용해 본 적이 있습니다. 저는 전문가가 아니므로 질문은 삼가 주시기 바랍니다.

프런트엔드 레이어에서는 웹 개발자인 경우 자체 JavaScript 프런트엔드를 만들거나 Streamlit 또는 Dash와 같은 Python 프레임워크를 사용할 수 있습니다.

적어도 저에게 문제는 제가 숙련된 R 사용자이고 Shiny 프레임워크를 사용해 왔다는 것입니다.

Python 웹 앱을 만들어야 했을 때, 저는 모든 종류의 상태 관리를 처리하고 캐싱을 관리해야 한다는 사실에 놀랐고, 상황이 꽤 복잡해질 수 있다는 것을 알게 되었습니다. 복잡하고 짜증나는 일이죠.

또 다른 염두에 두어야 할 점은 일반적으로 이러한 앱, 특히 여러 구성 요소가 있는 경우 배포 복잡성이 상당히 높다는 것입니다.

이제 오늘 제가 보여드리고 싶은 도구들은 이러한 문제들을 해결합니다.

WebAssembly부터 시작해 보겠습니다. 아마 들어본 적이 있는 분도 계실 겁니다. 음, 웹사이트에서 WebAssembly에 대한 모호한 정의를 제공합니다.

스택 기반 가상 머신을 위한 이진 명령어 형식이라고 합니다.

저는 컴퓨터 과학 배경이 없어서 무슨 뜻인지 모르겠지만, 실제로 제가 생각하는 바로는 WebAssembly가 브라우저에서 컴파일된 코드를 실행할 수 있다는 의미입니다.

정말 멋집니다. Chrome, Safari, Edge에서 C, C++, Rust 또는 Python 코드를 실행할 수 있습니다.

또한 사람들은 이 작업을 진행하고 있으며 거의 네이티브 성능에 가깝습니다.

따라서 손해 보는 것은 없습니다. 그리고 웹 개발에 대해 생각해 보면, 실제로 브라우저에서 완전히 실행되는 웹 앱을 구축할 수 있는 새로운 영역이 열립니다.

따라서 호스팅된 백엔드 서버가 필요하지 않습니다.

너무 좋게 들리지만, 그렇습니다. 몇 가지 주의 사항이 있으며 나중에 이에 대해 이야기하겠습니다.

하지만 전용 백엔드 서버 없이 앱을 만들 수 있다면 기본적으로 앱을 정적 웹사이트로 배포할 수 있습니다.

그래서 저는 정확히 이 작업을 수행하는 예를 보여드리겠습니다. 사용해 볼 수 있는 GitHub Pages를 사용하여 정적으로 배포된 앱을 제공하겠습니다.

GitHub Pages 또는 Netlify를 사용해 본 적이 있다면 데이터를 사용하는 Python 웹 앱을 배포하고 인터페이스가 있으며 사람들이 가지고 놀 수 있다는 의미입니다.

기본적으로 유지 관리 비용이 없습니다. 서버 비용 등을 지불할 필요가 없습니다.

정말 멋지다고 생각합니다. 나중에 사용 사례에 대해 이야기하고 몇 가지 아이디어를 드리겠습니다.

WebAssembly 외에도 Shiny 및 Shiny Live라는 두 가지 개념을 더 소개하고 싶습니다. R에 대한 경험이 있는 분들은 Shiny 프레임워크에 익숙할 것입니다.

R에서 대시보드 또는 앱을 구축하는 데 가장 적합한 프레임워크입니다.

최근 Posit 회사에서 Shiny 프레임워크를 Python으로 번역하기 시작했습니다. 하지만 멋진 점은 순수 Python으로 되어 있다는 것입니다.

WebAssembly를 사용하여 배포하는 것에 대해 이야기할 때 매우 유용합니다.

Shiny의 멋진 점은 코드 예제를 통해 설명하겠지만, Shiny가 왜 멋지다고 생각하는지입니다.

첫째, 상태 관리를 할 필요가 없습니다. 콜백 함수를 작성한 적이 있다면 이 작업을 수행할 필요가 없습니다.

솔직히 Python에서는 정말 어려움을 겪었습니다. 그래서 간단한 대시보드를 만들기 위해 보통 R로 돌아갔습니다.

자동 반응형 실행 엔진을 얻을 수 있습니다. 예제 앱에서 보시다시피 입력을 변경하면 Shiny는 어떤 요소를 다시 렌더링해야 하는지 처리합니다.

Streamlit을 사용해 본 적이 있을 것입니다.

Streamlit에서 입력을 변경하면 Streamlit이 HTML 파일을 만들고 입력을 변경할 때마다 모든 작업을 다시 수행하므로 전체 사이트가 다시 렌더링됩니다.

이것은 마치 1990년대 인터넷과 같습니다. 하지만 Shiny는 자동 실행 엔진을 제공하므로 이러한 문제를 해결해 줍니다.

CSS 및 JavaScript 사용자 지정에 대한 모든 지원도 받을 수 있습니다.

저는 독립 컨설턴트로서 몇몇 고객을 위해 대시보드를 구축하는데, CSS와 JavaScript를 사용하여 대시보드를 사용자 정의하는 데 많은 시간을 할애할 수 있습니다.

좋은 점은 최소한 프런트 엔드와 백엔드 구성 요소는 Shiny에서 처리하므로 사용자 정의를 그 위에 쌓을 수 있다는 것입니다.

이것이 바로 Shiny였죠? Shiny는 웹 앱을 구축하는 데 사용됩니다.

잠시 후에 예를 들어 드리겠습니다. Shiny Live는 Shiny 앱을 브라우저에서 완전히 실행할 수 있게 해주는 프레임워크일 뿐입니다.

Shiny 앱을 가져와서 WebAssembly를 사용하여 실행하는 방법에 대한 지침을 제공합니다.

Pyodide에 대해 들어보셨을 수도 있습니다. 이는 Python에서 WebAssembly를 위한 선도적인 프레임워크입니다.

본질적으로 Cython을 WebAssembly로 포팅한 것이므로 아마도 Pyodide에 대해서만 전체 강연을 할 수도 있을 것입니다.

정말 놀랍고 흥미로운 프로젝트라고 생각합니다.

Shiny Live의 멋진 점은 여기서 세부적인 사항에 대해 걱정할 필요가 없다는 것입니다.

Shiny Live가 모든 Pyodide 구성을 처리해 준다는 것을 확신할 수 있습니다.

개념을 설명하기 위해: 기존 Shiny 앱에서 Shiny 앱 또는 Python으로 앱을 만들면 일반적으로 서버에서 실행되는 Python 프로세스가 있고 서버에 액세스하는 여러 클라이언트가 있으며 서버가 코드를 실행합니다.

서버는 로드 밸런싱, 캐싱, 이 모든 것들을 처리합니다.

그리고 데이터 앱의 경우 물론 코드를 실행하기도 하죠? UI 변경에 대한 응답으로 일부 집계를 수행하는 경우 SH 서버가 이를 처리합니다.

이제 Shinylive를 사용하면 서버가 이러한 모든 계산을 수행하는 대신 클라이언트 측에서 모든 작업을 수행하는 작은 Python 프로세스를 실행한다고 생각할 수 있습니다.

하지만 이와 유사한 이미지를 다시 보게 될 것입니다. 웹 앱으로 하고 싶은 모든 작업에 대해 서버를 제거할 수 있는 것은 아닙니다.

음, 물론 마음에 떠오르는 것들. 오, 크리스토프, 하지만 인증은 어떻게 처리합니까?

비밀 같은 건 어떻게 처리하냐고요? 이건 나중에 다룰 겁니다. 코드 예제를 한번 보시죠. R Shiny 프레임워크에 익숙하신 분들에게는 매우 친숙할 것이고, 처음 접하시는 분들을 위해 제가 설명해 드리겠습니다.

아주 간단한 앱을 만들어 봤습니다. 먼저 코드에 대해 이야기하고 나중에 이 예제를 다시 살펴볼 겁니다. 확장할 것이기 때문이죠. 하지만 라이브 앱도 살펴볼 겁니다.

시각화에는 플로틀리를 사용했습니다.

넘파이는 숫자, 숫자 벡터를 플롯하고 싶어서 사용했고, Shiny 라이브러리를 사용했습니다.

특히 필요한 함수는 앱, 렌더, UI 이 세 가지뿐입니다. 일반적으로 저는 아트에서 출발하여 매우 자연스러운 방식으로 Shiny 앱에 접근합니다.

하지만 먼저 UI를 어떻게 정의할지 생각합니다.

어떤 구성 요소가 있을까요? 어떤 레이아웃을 사용하고 싶을까요? 간단한 레이아웃은 사이드바가 있는 페이지가 될 수 있겠죠?

따라서 UI를 사용하여 페이지 사이드바를 정의한 다음, 예를 들어 슬라이더가 있는 사이드바를 도입할 수 있습니다. 보시다시피 Shiny 프레임워크는 페이지 레이아웃, 슬라이더와 같은 UI 구성 요소를 제공하지만 텍스트 상자, 확인란, 라디오 버튼 등도 제공합니다.

Shiny 앱에 LLM을 내장하고 싶다면 채팅 인터페이스도 있습니다. 슬라이더에서는 슬라이더 이름, 객체 이름, 최소값, 최대값, 시작값만 정의하면 됩니다.

UI에서 할 일은 출력 구성 요소를 정의하는 것입니다. 여기서는 UI 입력으로 막대 개수를 선택하는 이 입력 슬라이더를 사용하여 히스토그램을 만들고 싶습니다.

따라서 출력을 히스토그램인 플롯으로 정의할 수 있지만, 출력 테이블, 출력 텍스트, 출력 HTML 등으로도 정의할 수 있습니다.

Shiny에 유형을 알려주는 다양한 출력이 있으며, Shiny가 렌더링을 처리합니다.

이 제목인 'Hello PyData Berlin'도 포함하겠습니다. UI를 처리했으면 서버 로직을 정의합니다.

여기서처럼 같은 스크립트에서 이 작업을 수행할 수 있습니다.

같은 app.py 파일이지만, 물론 여러 스크립트로 분할할 수도 있습니다.

일반적으로 하는 것처럼요. 그리고 더 큰 프로젝트라면 다른 서버 구성 요소, 다른 UI 구성 요소를 분리할 수도 있겠죠?

그런 다음 하나의 메인 스크립트에서 조립합니다. 그런데 여기서 무슨 일이 일어날까요? 이 서버 기능을 정의합니다.

Shiny에서 제공하는 데코레이터를 사용합니다. 기본적으로 데코레이터는 이후에 나오는 함수, 즉 출력 또는 렌더링 플롯 함수를 래핑하는 것으로 생각할 수 있습니다.

적어도 직관적으로는 그런 일이 일어나고 있습니다.

여기서 기본적으로 하는 일은, 그렇죠, 맨 위에 출력이 있습니다. 히스토그램 출력을 정의했습니다. 따라서 서버에서 이 히스토그램이 어떻게 생겼는지, 어떻게 생성되는지 정의해야 하며, 렌더링 플롯은 실제로 무언가를 렌더링하고 있음을 나타냅니다.

따라서 Matplotlib이나 Seaborn 등이 사용되며, 여기서 함수로 히스토그램을 정의합니다.

NumPy를 사용하여 임의 시드를 정의하고, 19행에서 NumPy를 사용하여 임의 숫자 벡터를 생성한 다음 히스토그램을 플롯합니다.

또한 매우 중요한 점은 여기서 구간으로 입력 n이 있다는 것입니다. 이것은 슬라이더에서 위에서 정의한 n과 정확히 동일하며, 이 앱을 시작하려면 이것을 실행하면 됩니다.

따라서 앱 함수는 앱 UI와 서버를 입력으로 사용합니다.

이것은 Shiny 앱입니다. Python 코드에서 정의하는 것은 무엇이 일어나야 하는가입니다.

Shiny Live는 무엇을 할까요? Shiny Live는 이 앱을 WebAssembly를 사용하여 실행할 수 있는 것으로 내보냅니다.

따라서 터미널에서 Shiny Live 내보내기 앱을 docs 폴더로 실행하면 몇 개의 파일을 얻을 수 있습니다.

docs 폴더에는 app JSON이 있습니다. 이것은 기본적으로 앱의 논리, 전체 앱이 JSON으로 직렬화된 것입니다.

나중에 다시 살펴보겠습니다. index.html. 이것은 애플리케이션을 표시하는 간단한 웹 페이지입니다.

여기서는 많은 일이 일어나지 않습니다. 애플리케이션의 편집기 보기를 얻을 수도 있으므로 편집 폴더는 건너뛰겠습니다.

그것은 일반적으로 그다지 중요하지 않습니다.

하지만 중요한 것은 Shiny Live 서비스 워커와 Pyodide 파일이 있다는 것입니다. Shiny Live 서비스 워커는 Pyodide에서 무엇이 필요하고 브라우저에서 무엇을 실행해야 하는지 처리하고, Pyodide는 기본적으로 사용하려는 모든 라이브러리를 제공합니다.

좋아요, 라이브 앱을 살펴보기 전에 몇 가지 더 말씀드릴 게 있습니다. 이제 휴대폰을 꺼내세요.

전에 보여드린 스크립트인 app.py는 Shiny Live를 실행하면 이 app JSON으로 인코딩됩니다.

여기서는 약간 축약되었습니다. 제가 잘라냈는데, 그냥 그렇습니다. 모든 Python 스크립트를 한 줄로 넣습니다.

매우 깁니다. 하지만 보시다시피, 맨 위에서 일어나는 일은 matplotlib을 plt로 가져오고 numpy를 가져오는 것입니다.

이것은 정확히 Python 코드일 뿐입니다. 그렇죠? 여기서 처음 깨달을 수 있는 것은, 세상에, 내 Python 스크립트에 넣은 모든 것이 이 앱의 JSON에 있다는 것입니다. 그렇죠?

그리고 이것을 공개 웹사이트로 배포하면 공개됩니다.

이 점을 명심하세요. 하지만 Shiny 앱, Shiny Live 앱을 정적 웹사이트로 배포하는 것은 매우 간단합니다. GitHub Pages로 무언가를 배포한 적이 있다면 똑같습니다.

GitHub Pages를 docs 폴더로 지정하기만 하면 됩니다. 여기서는 자세히 다루지 않겠습니다.