The Future of CodeSandbox

2017.6.28 - ✏️Ives van Hoorne

The Future of CodeSandbox

이미 기사와 함께 CodeSandboxx를 공식적으로 발표한지 두 달이 지났다. 기사에서 몇 가지 통계를 공유하기 시작 했으므로 예전의 sake를 위해 이것을 다시 하자.

CodeSandbox는 지난 기사 후에 많은 인기를 얻었다. 두 달 전에 우리는 1500개의 프로젝트와 280명의 사용자를 가졌으나, 현재 우리는 16000개의 프로젝트와 2300명의 유저를 가지고 있다. 우리는 매일 130만 개의 새로운 코드를 저장하고 있다. 내 기대를 넘어선 이 경우가 얼마나 놀라운 일인지 설명할 수 없다. CodeSandbox를 사용하고, 문의해준 모든 분들께 감사하다.

What has been done

지난 2.5개월 동안 구축한 것에 대해 회고하는 것으로 시작하겠다. 우리는 많은 피드백을 받았고, 덕분에 많은 새로운 기능을 만들 수 있었다. 큰 변경 사항 중 일부는 다음과 같다.

Profile view

CodeSandbox에서 다른 사용자가 생성한 프로젝트의 내용을 확인할 수 있으며, 모든 사용자는 모든 프로젝트를 나타내는 profile view를 갖는다. 다른 프로젝트를 '좋아요' 하고, 내 프로젝트가 받은 조회수를 확인할 수 있다.

Embeds on Medium

medium처럼, embedly를 지원하는 플랫폼에서 프로젝트를 공유할 수 있다. 내장 된 프로젝트를 편집하는 것도 가능하다. 이것은 medium에서 interactive한 예제를 통한 component tutorial 처럼 꽤 창조적인 일을 할 수 있다는 것을 의미한다.

Improved npm dependency support

CodeSandbox를 발표한 후에 WebpackBin의 저자인 Christian Alfoni와 연락을 했다. 우리의 서비스는 모두 npm 의존성을 지원하며 이를 효율적으로 처리해야 . 우리는 함께 작업하고 WebpackBin과 CodeSandbox에 대한 공통 패키지를 구축하기로 결정했다. 새로운 패키지는 이전 버전보다 훨씬 똑똑하며, CSS 파일 및 브라우저 매핑과 같은 기능을 지원한다. 이것에 대한 기사를 썼고, 여기서 확인할 수 있다. Christian에게 감사하다. 그는 패키지 작업에 엄청난 노력을 기울였으며 그와 함께 일하는 것은 훌륭하다.

Vision

CodeSandbox에 대한 아이디어로 수십 명의 사람들이 우리에게 연락했습니다. Phil Holden은 또한 CodeSandbox와 같은 온라인 편집기의 사용 사례에 대한 매우 흥미로운 기사도 발표했다. 그것은 우리에게 영감을 주었고 우리는 이 tool이 창작물을 공유하는 플랫폼보다 훨씬 더 많은 잠재력을 가지고 있음을 깨달았다. 우리는 CodeSandbox의 향후 개발을위한 두 가지 목표를 설정했다.

1. Make it so easy that a child can use it

CodeSandbox를 사용해 React를 배우고 있는 사람들로부터 수십 개의 이메일을 받았는데 이는 매우 의미가 있습니다. CodeSandbox와 같은 tool을 사용하면 bash의 작동 방식, npm의 의미 또는 '노드'의 의미를 배울 필요가 없다. 단지 웹 페이지를 여는 것만으로도 해킹을 시작할 수 있다.

막 배우기 시작했을 때, 사용자들은 이러한 추가 기술을 먼저 배우지 않고 즉시 재미있는 것들을 시작하고 싶어한다. 물론 결국에는 그러한 추가 기술들을 배워야겠지만, 처음 시작할 때 이러한 장애물들을 가지는 것은 단지 시작하고 싶을 때 낙담하게 된다.

우리가 더 잘알겠지만, 초보자의 입장에서는 지식의 저주로부터 고통받고, 그것은 점점 더 어려워진다. terminal과 편집기 같은 것은 사소한 일이 되어 우리는 이 문제에 대해 몇시간 동안 당황했다는 사실을 잊게된다.

이로 인해 우리는보다 야심적이지만 관련성 높은 목표를 설정해야합니다. 웹 애플리케이션 개발을 너무 쉽게 만들어 어린이도 쉽게 학습을 시작할 수 있습니다.

이로 인해 확실하게 우리는 더 야심차지만 공감할 수 있는, 웹 어플리케이션을 쉽게 개발하여 심지어 아이들도 그것을 쉽게 배울 수 있도록 목표를 설정할 필요가 있다.

최선의 학습 방법은 시행 착오에 의한 것이라고 생각한다. 오류가 발생한 경우 솔루션을 적용해야하는 이유를 더 잘 기억할 수 있을 것이다. 즉, 사용자가 오류를 발생시키면 솔루션에 대한 최상의 지침을 제시해야 한다.

CodeSandbox의 경우, 이것은 보다 친숙한 오류 메세지 작성에 집중하고 오류가 발생할 때 제안사항(라이브러리 소실)을 제공해야 한다는 것을 의미한다. 구성은 최소한으로 유지되어야 하며, 구성이 있는 경우 우리는 GUId에서 이것을 수행할 수 있는 옵션을 제공해야 한다.

CodeSandbox를 사용자에게 친숙한 편집기로 만들기 위해 많은 개선이 이루어졌다. 사용자가 작업하는 context를 가정할 수 있기 때문에, 다른 편집기보다 훨씬 더 유용하다. 이것을 우리의 장점으로 활용하자.

2. Make it a place for easily discoverable examples

매일 약 300개의 프로젝트가 생성된다. 이 프로젝트들은 무수히 많은 다른 목적들로 생성되었지만, 대부분 다른 사람들과 공유되어야 한다. CodeSandbox에 내장된 프로젝트를 찾을 수 있는 방법은 없다. 우리는 귀중한 정보의 금광에 앉아있기 때문에 이것은 정말 부끄러운 일이다.

라이브러리는 좋은 예이다. 에러보고 또는 문서화를 위해 CodeSandbox를 사용하는 redux-form, glamorous, mobx, apollo-client, css-constructor 및 react-day-picker와 같은 멋진 라이브러리가 이미 있다. 이 라이브러리의 저자가 쓴 귀중한 콘텐츠가 있지만 이러한 라이브러리와 예제를 쉽게 찾을 수있는 방법은 없다.

또한 React에 대한 수업이 있는 수십 개의 프로젝트가 있다. 사람들은 프로젝트를 사용하여 PureComponent와 Component의 차이점 또는 react-router를 사용하여 delayed navigation을 사용하는 방법과 같은 개념을 가르친다. 이 프로젝트들은 종종 Reactiflux 또는 Twitter에서 공유되지만, CodeSandbox를 통해 발견할 수 있다면 더욱 좋을 것이다.

우리는 고급 검생 기능을 가져야 한다. 그 기능은 예를 들어, 라이브러리를 빠르게 찾고, 그 라이브러리를 사용한 모든 프로젝트를 찾을 수 있도록 해줄 것이다.

New Features

새로운 기능이 없는 CodeSandbox 게시물은 CodeSandbox 게시물이 아니다. CodeSandbox에 프로젝트를 보다 쉽게 넣을 수 있는 두 가지 새로운 기능이 출시 되었다.

Import from GitHub

github에서 import하는 것은 많은 요청을 받은 기능이다. 그리고 이제 가능하다. 구현은 꽤 간단하다. github URL을 선택하고 github.com을 codesandbox.io/s/github 로 바꾸면 해당 경로가 git 저장소를 통해 자동으로 최신 상태로 유지되는 프로젝트를 가리킨다.

현재는 공식적으로 CodeSandbox에서 create-react-app 프로젝트만 지원한다. 이것은 아마도 github의 다른 프로젝트에서는 작동하지 않을 것을 의미한다.

CodeSandbox CLI

CLI를 사용하여 create-react-app 프로젝트를 업로드 할 수도 있다. 프로젝트에 문제가 있다면, 이제 해당 프로젝트를 CodeSandbox에 쉽게 업로드하고 다른 사람들에게 도움을 요청할 수 있다. 또는 버그 보고서를 작성하는 경우, 재현 가능한 사례를 CodeSandbox에 쉽게 업로드 할 수 있다.

CLI는 yarn 또는 npm을 사용하여 설치할 수 있다.

npm i -g codesandbox

프로젝트를 업로드하기 위해서는 프로젝트 디렉토리로 이동하여 codesandbox ./를 실행한다. 현재 디렉토리가 업로드되고 나면 프로젝트의 URL이 제공된다. CLI 소스는 여기에서 찾을 수 있다.

What will come

다가오는 여름의 로드맵에 많은 내용이 있다. 편집기를 보다 사용자 친화적으로 만들기 위해 많은 시간을 집중하고 싶다. 또한 앞으로 몇 달 안에 구현 될 기능 목록도 있다. 주요 내용은 다음과 같다.

Search using Algolia

나는 이것에 대해 매우 기쁘게 생각한다. 프로젝트들의 검색을 추가하기 위해 Algolia와 협력하여 개발하고 있다. 이것은 프로젝트에 대한 검색 가능성을 추가하는 데에 많은 도움이 된다. 구체적인 예로, redux-form을 사용하는 방법을 알고싶다고 해보자. 이번에 도입할 새로운 검색으로 이 라이브러리를 사용한 모든 프로젝트를 찾을 수 있다. 우리는 CodeSandbox를 React 예제를 찾기 위해 중앙 위치로 바꾸기를 희망한다. 이 기능을 사용하면 프로젝트들에 태그를 지정할 수도 있다.

Deploy with ZEIT Now

또한 ZEIT와 함께 Now를 프로젝트와 통합하기 위해 노력하고 있다. Now의 마법을 사용하여 어플리케이션의 버전을 배포용으로 발전시키는 것이 가능하다. 이 기능은 정말 멋지다. 왜냐하면 이제는 CodeSandbox에서 애플리케이션을 처음부터 끝까지 빌드 할 수 있기 때문이다. 이 작업은 이미 수행되었지만 배포 과정에서 누락되었다. ZEIT의 사람들은 많은 도움이 되고, 우리와 같은 비전을 공유하고 있다는 것이 정말 좋다.

Static file support

정적 파일 지원이 없으므로 CLI를 사용하여 업로드 할 때, 아직 공용 폴더를 사용할 수 없다. 이것은 많은 요청이 있었고 곧 추가 될 것이다. 이렇게하면 프로젝트에서 호스트 이미지와 다른 binaries를 바로 사용할 수 있습니다

Pricing

우리는 또한 'CodeSandbox Pro'를 가지고 있다. 이는 정적 파일 호스팅 및 템플릿의 서버 비용에 어느 정도 기여한다. 전반적인 경험에 제한을 두고 싶지 않기 때문에, CodeSandbox Pro는 전적으로 선택 사항입니다. CodeSandbox Pro를 사용하면 private한 프로젝트를 만들 수 있고, 정적 파일을 위해 더 많은 스토리지를 사용할 수 있다. 아이디어는 매월 금액을 결정할 수 있고, 특정 최소 금액 이상을 기부하는 한 괜찮습니다. 우리는 아직 최소값을 결정하지는 않았지만 저렴한 가격이되도록 보장 할 것이다.

Templates

현재는 create-react-app 템플릿을 따르는 프로젝트만 지원합니다. 우리는 vue-cli로 시작하여 다른 템플릿으로 확장하고 싶다. 새 프로젝트를 만들 때 사용할 특정한 템플릿을 지정할 수 있습니다. 해당 템플릿에 따라 편집기 및 색상도 그에 따라 변경된다. 주요 요구 사항은 여전히 프로젝트를 시작하기 위해 필요한 설정이 전혀 없어야한다는 것이다. 이것은 다운로드 된 샌드 박스에도 적용된다.

We're open source!

• Client
• CLI
• Git Extractor