Bret Victor의 "Inventing on Principle"강연에서와 같이 라이브 코딩을 지원하는 도구
전 Apple UI 디자이너였던 Bret Victor가 소스 코드에서 문자 그대로 하나의 기호를 변경 한 후 실행중인 코드를 즉시 업데이트하여 놀라운 데모를 보여주는 이미 잘 알려진 비디오를 보았습니다 .
비디오를 보지 않았거나 볼 시간이없는 사람들에게 내 질문을 분명히하기 위해 : 나는 그런 도구를 사용하여 내 자신의 소프트웨어를 작성하고 싶습니다. 그가 시연 한 도구를 사용할 수 있습니까? 아니면 다른 유사한 도구가 있습니까?
언어 / 환경은 중요하지 않습니다. 코드를 실행 한 다음 소스의 한 줄을 변경하고 다시 시작하지 않고 결과가 업데이트되는 즉시 확인하고 싶습니다.
동영상은 YouTube 에서도 볼 수 있으며 핵심 사항은 다음과 같습니다.
- 03 : 30-05 :30-그래픽 알고리즘 라이브 코딩 (공백)
- 11 :00-14:30-일부 게임 코드 라이브 코딩 (공간 및 시간)
- 17 :30-21:30-라이브 코딩 지역 변수 (상태)
누가 그것을
React와 ELM 커뮤니티, 그리고 일반적으로 프론트 엔드 함수형 프로그래밍 커뮤니티에서 흥미로운 것들을 찾을 수 있습니다.
이런 종류의 개발 환경을 제공하려는 최근의 풀 스택 플랫폼은 다음과 같습니다.
이브 :
Andreessen Horowitz / Y-Combinator 스타트 업, 230 만 자금 지원을 받았으며, 이미 LightTables를 구축 한 영향력있는 Clojure 프로그래머 인 Chris Granger가 후원했습니다.
기술 : Rust (백엔드), 집에서 만든 React 개념 ( "microReact"라고 부르는 것)을 구현 한 TypeScript (프론트 엔드)
유니슨 :
회사는 아니지만 (아직?) Paul Chiusano (유명한 책 "FP in Scala"의 저자)의 Patreon 캠페인의 지원을 받았습니다.
기술 : Haskell (백엔드), ELM (프런트 엔드).
참고 : 이러한 도구의 배후에있는 사람들은 숙련 된 기능 프로그래머라는 것을 알 수 있습니다. "작동 방식"섹션을 확인하십시오.
작동 원리-> 함수형 프로그래밍
프로그램에는 상태가 있습니다.
Bret Victor가 그 비디오를 만들 수 있었던 이유는 무엇입니까?
때문에:
- 그의 아키텍처는 상태 변이에 대해 명시 적입니다.
- 그는 기능적 순도를 사용합니다
- 그는 현재 UI 상태가 아닌 상태로 역사적 사실을 기록합니다.
이 강연에서 영감을 얻은 한 가지 도구는 ELM 언어입니다.
ELM은 다음과 같이 말합니다 .
따라서 디버거의 루트에는 Elm 자체의 디자인이 있습니다. 언어 수준에서 올바른 디자인 선택으로 시작하지 않으면 시간 여행 디버거를 만드는 것이 매우 복잡해집니다. 필요한 설계 요구 사항을 부분적으로 충족하는 언어조차도 심각한 문제를 안고 있습니다.
따라서 정말 이해해야 할 것은 흥미로운 것은 기술이 아니라 기본 소프트웨어 아키텍처라는 것 입니다. 아키텍처가 있으면 이러한 디버깅 기능을 추가하는 것이 그리 어렵지 않습니다.
ReactJS / Flux 커뮤니티의 많은 사람들이 이런 종류의 아키텍처로 정말 큰 성과를 거둘 수 있음을 보여주었습니다. Om 의 ClojureScript 과대 광고의 David Nolen 이 아마도 방아쇠 일 것입니다. Dan Abramov는 최근 우리가 Bret Victor의 디버깅과 비교할 때 매우 유사한 것을 달성 할 수 있음을 보여주었습니다 .
필자는 이러한 유형의 아키텍처에서 활용하는 기능이기도 한 JSON으로 사용자 세션 비디오 를 녹화하는 실험을 해왔습니다 .
따라서 그가 달성 한 것은 영리한 코드 트릭이나 슈퍼 언어가 아니라 정말 좋은 아키텍처 패턴에 의해 이루어짐을 이해해야합니다.
이러한 패턴은 새로운 패턴이 아니며 데이터베이스 작성자와 일부 백엔드 개발자가 명령 / 이벤트 소싱, 저널링을 포함하여 다른 이름으로 오랫동안 사용하고 있습니다. 소개를 원하신다면 Confluent.IO 블로그는 매우 교육 소스 .
문제는 코드를 다시로드하는 것이 아니라 코드가 다시로드 된 후 상태로 무엇을해야하는지에 관한 것입니다.
당신이 정말로 이해해야 할 것은 그 질문에 대한 독특한 대답이 없다는 것입니다. 그것은 모두 당신이 성취하고자하는 것에 달려 있습니다.
예를 들어, Mario와 함께한 Bret Victor의 예에서 중력과 같은 매개 변수를 수정하면 과거 (기록한 내용)와 미래 (코드 변경 후 수행 할 작업) 모두에 영향을 미칠 수 있음을 알 수 있습니다. 즉, 사용자 의도가 다른 컨텍스트에서 재 해석되어 새로운 사실 기록 (종종 명령 소싱이라고 함)이 생성됩니다.
이것은 그가 보여준 것과 같은 비디오 게임에서는 정말 흥미롭지 만 다른 많은 응용 프로그램에서는 절대적으로 쓸모가 없습니다. 세금 %가 매년 증가하거나 감소 할 수있는 책임 애플리케이션의 예를 들어 보겠습니다. 올해 세금 %를 수정하는 것이 10 년 전의 대차 대조표에 영향을 미칠 것이라고 정말로 생각하십니까? 분명히 그렇지는 않지만 올해에도 여전히 영향을 미칠 수 있습니다.
또한 Mario는 점프 매개 변수를 조정할 때 트레이를 배치합니다. 도구는 Mario 요소에 대해 표시해야한다는 것을 스스로 알 수 없습니다. 당신은 그것에 대해 명시해야합니다. 그렇지 않으면 구름이나 거북이에 대해 똑같이 할 수 있습니다. 책임 성 앱에 대해 동일한 작업을 수행하는 것이 합리적입니까?
제가 의미하는 것은 이것이 잘 제작 된 멋진 데모라는 것입니다. 바로 사용할 수있는 매우 잘 작동하는 유사한 개발 환경을 얻을 수 없습니다. 하지만 쉽게 할 수있는 아키텍처 패턴을 배우고 ELM / Om / Redux / Flux / ReactJS (그리고 일부 Haskell / Scala / Erlang도 유용 할 수 있습니다!)와 같은 도구를 사용하면이를 구현하는 데 크게 도움이됩니다. 올바르게 재 장전 할 수 있도록 최대한 제공합니다.
Chris Granger는이 방향으로 유망한 움직임처럼 보이는 Light Table이라는 것을 만들고 있습니다. 처음에는 Clojure 만 지원하지만 앞으로 다른 언어도 지원할 것이라고 약속합니다.
- http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/
- http://app.kodowa.com/playground
다음은 소스의 라인을 변경하고 즉각적인 효과를 볼 수 있다고 생각합니다.
- Codea Air Code : 브라우저의 코드 (Lua), Wi-Fi에 연결된 iPad에서 출력을 확인합니다.
- Gabriel Florit의 Water . HTML, CSS는 브라우저에서 실행됩니다.
- Neonux의 Live Scratchpad. Mozilla 확장.
- Swift Interactive Playgrounds : Swift 프로그래밍 언어로 코딩하기위한 Xcode 6과 함께 제공됩니다.
- JS Bin : HTML, CSS, Javascript, 브라우저에서 실행됩니다.
- 라이트 테이블 : Youtube의 예 .
- Atom : 미리보기 html 플러그인 포함.
참고 : 1, 5-7에만 경험이 있습니다. 이 중 많은 부분에서 커서를 코드의 특정 부분에 놓고 이미지의 관련 부분을 강조 표시 할 수 없다고 생각합니다.
편집 : 추가 된 항목 번호. 4 (2014.10.27), 5 (2014.10.31), 6-7 (2015.03.12).
편집 2 (2015.06.25) : http://sixrevisions.com/tools/code-demo-sites/에서 (대부분 HTML / CSS / Javascript 임).
I've built a plug-in for Emacs, PyCharm, and Eclipse called Live Coding in Python that covers two of the three features you asked about. It instantly updates the result of a turtle graphics algorithm while you type the code.
It also displays the state of local variables next to each assignment. Here's an example display of a binary search algorithm:
def search(n, a): | n = 3 a = [1, 2, 4]
low = 0 | low = 0
high = len(a) - 1 | high = 2
while low <= high: | |
mid = (low + high) / 2 | mid = 1 | mid = 2
v = a[mid] | v = 2 | v = 4
if n == v: | |
return mid | |
if n < v: | |
high = mid - 1 | | high = 1
else: | |
low = mid + 1 | low = 2 |
return -1 | return -1
|
i = search(3, [1, 2, 4]) | i = -1
The IPython Notebook is step in that direction. Although, it is more geared towards Interactive Exploratory Analysis for scientific problem, I find it to be very interactive and fun to develop with.
I also just discovered Live Code. After some experimentation I found, it does not encompass all the principles of Bret Victor philosophy. It has a straight forward syntax but the UI doesn't make for interactive development. They still have some way to go.
Then there is also R. Since the new developments with Shiny and knitr some interesting innovations are taking place which is line with Bret's philosophy.
There's COLT — a live coding tool for Flash (ActionScript3). It allows methods updates, adding new fields/methods/classes, updating embedded assets, etc at runtime while preserving the application state, just like in Bret Victor's video. There are some demo videos of it in action, with this being the most impressive one so far.
It doesn't force you into any new IDE, it's a separate tool which sends the incremental updates to the running app when you hit 'save' in your IDE.
JavaScript support is also announced.
Code orchestra guys recently released their livecoding tool called C.O.L.T. It supports JavaScript and ActionScript and looks very promising. Highly recommended to try it out.
Haskell for Mac may have a limited audience since it’s (a) platform-specific — as you may have guessed from the name — and (b) commercial software ($20 at present). But it’s very explicitly based on Brett Victor’s ideas, as discussed in an early blog post.
It certainly deserves to be added to any exhaustive list of programming environments that implement “Learnable Programming”.
These days for frontend development a lot of the tools offer something called "hot-reloading", basically making your changes in code immediately visible in the browser/mobile emulator. This is independent of the IDE/editor.
'Programing' 카테고리의 다른 글
| 원격 프로 시저 호출과 웹 서비스의 차이점은 무엇입니까? (0) | 2020.10.20 |
|---|---|
| 네이티브 Visual Studio 개발자를위한 유용한 추가 기능 또는 플러그인 (0) | 2020.10.20 |
| NodeJS에서 CoffeeScript의 예? (0) | 2020.10.20 |
| Angular 2와 함께 D3.js 사용 (0) | 2020.10.20 |
| Python : 메서드 호출에서 발생할 수있는 예외를 어떻게 알 수 있습니까? (0) | 2020.10.20 |