codeframe
1.0.0
Codeframe은 빠른 정적 웹 페이지를 구축하고 배포하는 가장 빠르고 쉬운 방법이며 웹에서 웹 용 물건을 만드는 방법을 배우는 가장 좋은 장소로 설계되었습니다. codeframe.co에서 실행중인 것을 찾을 수 있습니다.
사용하기 쉽습니다. Codeframe은 빠른 실험과 처음으로 코딩하는 법을 배우는 사람들을 위해 가장 먼저 구축되므로 단순성과 사용 편의성을위한 복잡성과 추가 기능을 피합니다.
빠릅니다. 개발 환경은 아이디어의 속도로 움직여야하며 빌드 툴링이 없으면 코드 프레임이 즉각적으로 될 수없는 이유가 없습니다. 나는 물리적으로 가능한 한 아이디어에서 공유 가능한 프로토 타입으로 시간을 줄이기 위해 코드 프레임을 만들었습니다. 편집기를 열고 코드를 작성하고 한 번의 클릭으로 공유하십시오.
? 오픈 소스이며 완전히 검사 할 수 있습니다. 백엔드 스택부터 코드 프레임 편집기 뒤의 JavaScript 코드에 이르기까지 CodeFrame을 실행하는 모든 것은 오픈 소스이며 브라우저에서 검사 할 수 있습니다. 전달 된 제품에서 읽을 수있는 소스 코드를 사용하면 코드를 배우는 사람들에게 차이가 생기고 코드 프레임은 소형 번들과 독점 소스로 추가 복잡성과 작은 효율성 이득보다 우선 순위를 정합니다.
속도가 빠르거나 코딩을 처음 접하는 학생들을 위해 설계된 것이 필요하지 않은 경우 더 많은 기능을 갖춘 더 나은 도구가 있습니다. Codepen은보다 강력한 기능과 사용자 정의 옵션을 갖춘 고전적인 브라우저 웹 IDE입니다. Codesandbox는 빌드 / 번들링 단계가있는 프로젝트를 실험하는 데 대단하며 Repl.it.it는 추가 파일 / 폴더 및 멀티 플레이어를 만들 수있는 기능을 포함하여 HTML 환경을위한 놀라운 개발 도구를 가지고있어 실시간 공동 작업을 원활하게 수행 할 수 있습니다.
자신만의 버전의 CodeFrame을 실행하는 데 필요한 모든 것은이 오픈 소스 저장소에 있습니다. 컴퓨터 나 서버에서 CodeFrame에서 자신의 버전을 실행하는 방법은 다음과 같습니다.
이 도구가 필요합니다.
git , github에서 컴퓨터로 저장소를 복사합니다. 여기에 git을 얻으십시오.npm (또는 대체 yarn ). NPM은 일반적으로 node.js와 함께 제공됩니다.ls , cd 등으로 컴퓨터 주변을 이동하는 방법에 대한 기본 친숙 함.이러한 도구를 설치하고 준비하면 첫 번째 단계는이 git 저장소를 컴퓨터에 복제하는 것입니다. 코드 프레임을 설정하고 싶은 디렉토리로 이동하여 실행하십시오.
$ git clone https://github.com/thesephist/codeframe.git (SSH가 GIT를 위해 설정하고 사용 방법을 알고 있다면 대신 git:// url을 사용할 수 있습니다. 그렇지 않으면 걱정하지 마십시오.)
이제 방금 만든 새 codeframe 디렉토리 Git에 cd 로 만들면 CodeFrame 저장소에 모든 파일이 표시됩니다.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... 여기에서는 npm start 명령을 사용하여 node.js로 CodeFrame을 시작해 보겠습니다.
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... 이는 Node.js가 Codeframe에 의존하는 웹 서버를 구축하기위한 JavaScript 라이브러리 인 express 찾을 수 없음을 의미합니다. npm install 실행하여 Express와 같은 종속성을 설치 한 다음 다시 시도해 봅시다.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 NPM이 node_modules/ 라는 새 디렉토리를 작성하여 CodeFrame의 종속성을 설치할 수 있습니다.
Codeframe running on localhost:4556 되는 경우 컴퓨터에서 CodeFrame을 UP 및 실행하는 것을 의미합니다. 브라우저로 이동하여 주소를 열어 http://localhost:4556 엽니 다. 이를 통해 컴퓨터에서 포트 4556 (Codeframe의 기본 포트)에서 실행되는 페이지를 찾아서 코드 프레임의 기본 페이지를로드해야합니다.
백엔드 서비스 파일 ( src/ )에서 변경 한 후 npm start (CTRL + C)로 서버를 다시 시작하여 변경 사항이 발생하는 것을 확인할 수 있습니다. 프론트 엔드 코드를 편집하는 경우 다시 시작할 필요가 없습니다. 브라우저에 페이지를 다시로드하십시오!
CodeFrame의 내부 작업에 대해 궁금한 점이 있다면 Litterate라는 도구를 사용하여 GitHub 페이지에서 사용할 수있는 완전히 주석이 달린 Codebase 버전을 구축합니다. 모든 것이 구현되는 방식을 살펴보기에 좋은 곳이지만이 섹션은 시스템 설계 방식에 대한 높은 수준의 개요를 제공합니다.
모든 코드 프레임은 (현재) 한 쌍의 파일, HTML 파일 및 JavaScript 파일입니다.이 파일은 텍스트 청크로 취급 할 수 있습니다. Codeframe은 HTML과 JavaScript의 모든 파일을 동일한 위치에 저장 한 후에는 수정할 수없는 방식으로 동일한 위치에 저장합니다. 이것은 Codeframe의 불변의 해시 기반 데이터베이스입니다.
사용자가 새 파일 또는 새 버전의 파일을 생성하면 편집기는 파일을 백엔드로 보냅니다. 백엔드는 파일을 가져 와서 해시 (현재 SHA256을 사용하고 있음)를 사용하고 해시를 사용하여 파일의 짧고 실질적으로 고유 한 파일 이름을 만듭니다. 파일은 해시 파일 이름을 사용하여 백엔드 (기본적으로 db/ )의 위치에 저장됩니다. 이를 통해 동일한 파일을 여러 번 저장하려고하면 백엔드에 하나의 파일 만 효과적으로 저장할 수 있습니다. 이것은 CodeFrame을 사용하여 실제로 많은 일이 발생하기 때문에 효율적입니다.
각 파일은 해시로 이런 방식으로 해시로 식별되므로 두 개의 해시 (코드 프레임의 HTML 및 JavaScript 파일에 대해 각각 1 개)를 사용하면 고유 한 코드 프레임을 정의 할 수 있습니다. 이것이 코드 프레임의 작동 방식입니다. 각 CodeFrame의 URL에는 각각 HTML 및 JavaScript 용 2 개의 해시가 포함되어 있습니다. 코드 프레임을 요청할 때 백엔드는 해시를 파일 이름으로 사용하기 전에 저장된 파일을 찾아서 파일을 편집기 또는 브라우저로 반환합니다.
이 해시 기반 파일 데이터베이스에는 몇 가지 장점이 있습니다. 각 파일이 한 번 저장되고 덮어 쓰지 않았다는 사실은 어느 시점에서든 코드 프레임이 URL에 의해 완전히 특징 지워진다는 것을 의미합니다. ChangeLog는 효과적으로 브라우저 기록이며 공유하는 모든 코드 프레임은 해당 버전을 영원히 유지합니다. 이는 또한 백엔드 서비스가 매우 간단하게 유지되어 있음을 의미합니다. 데이터베이스 외부에 부작용이없는 완전히 기능적인 설계입니다.
파일 시스템을 기반으로하는 현재 구현도 일부 영역에서 부족합니다. 주로 FS를 데이터베이스의 스토리지 계층으로 사용합니다. 파일 시스템은 이런 식으로 사용되도록 설계되지 않았으므로 많은 숫자로 확장 성 병목 현상을 누르면 Amazon의 S3와 같은 다른 키 값 저장소로 전환해야합니다. 또한 현재 데이터베이스의 완전히 별도의 파일에 각 파일의 증분 변경을 저장합니다. 이것은 또한 GIT가 변화를 처리하는 방식이지만 CodeFrame의 사용으로 인해 비효율적 일 수 있습니다. 이것은 현재 문제가되지 않지만 앞으로 더 중요해질 수 있으며, 그 시점에서 우리는 그것들을 해결할 것입니다.
Codeframe의 Frontend 사용자 인터페이스는 Codeframe 편집기 인 단일 Torus 구성 요소로 구축되었습니다. 이 편집기는 모든 코드 프레임의 전체 화면 편집기보기에서와 같이 독립형을 실행할 수 있거나 메인 페이지에서와 같이 특정 허용 웹 사이트에 <iframe> 으로 포함시킬 수 있습니다. 홈페이지의 나머지 부분을 포함하여 프론트 엔드에서 볼 수있는 다른 모든 것은 간단하고 필기 된 HTML, CSS 및 JavaScript입니다.
(1) 도서관을 작성하기 위해 Torus를 선택했습니다. (1) 도서관을 썼기 때문에 내부에 그것을 알고 있으며 내 취향에 맞게 설계되었습니다. Codeframe의 V1.0은 2 일 동안 20 시간 만에 구축되었으므로 빠른 프로토 타이핑은 우선 순위였으며 이전 브라우저에 대한 지원과 같은 것은 핵심 목표가 아니 었습니다. 또한 Torus가 다리를 늘리고 생산 환경에서 테스트 할 수있는 좋은 기회였습니다.
전체 편집기는 static/js/main.js 의 단일 JavaScript 파일로 구현되며 여기에서 읽을 수 있습니다.
Desktop 브라우저의 Codeframe 내부의 텍스트 편집기의 경우 Microsoft의 Visual Studio Code 편집기의 브라우저 용 텍스트 편집기 인 Monaco를 사용하고 있습니다. 빠르고 매끄럽고 데스크탑 브라우저에서 매우 잘 작동합니다. 그러나 모나코의 모바일 지원은 부족하므로 모바일 브라우저에서는 다른 편집기 인 Codemirror를 배송합니다. Codemirror는 Chrome Devtools 및 Glitch에서 널리 사용됩니다. 다른 도구 중에서도 가볍고 빠르게로드되며 Monaco보다 모바일 브라우저에서 훨씬 더 유용합니다. 두 편집자를 사용한 경험은 기본 경험에 거의 일치하는 반면, 각 편집기는 다른 편집자보다 작은 기능 향상을 제공합니다. 아래의 "Pluggable Editor Backend"섹션 에서이 플러그 가능한 아키텍처를 달성하는 방법에 대해 읽을 수 있습니다.
편집기의 미리보기 창은 CodeFrame의 생성 된 HTML + JS 페이지의보기를 열어주는 간단한 <iframe> 이므로 실시간으로 업데이트 될 때 볼 수 있습니다. 오늘날에는 편집자와 완전히 독립적으로 작동하지만 앞으로는 라이브 업데이트와 같이 더 멋진 기능을 가능하게하기 위해 둘 사이에 약간의 커뮤니케이션을 추가 할 수 있습니다.
Codeframe의 편집기에는 단일 핵심 종속성 만 있습니다. Torus는 가벼운 UI 프레임 워크입니다. 개발 속도를 위해 Codeframe은 현재 Editor HTML에서 UNPKG에서 NPM 패키지의 최신 버전을 가리키는 Editor HTML의 간단한 <script> 태그로 종속성을 선적합니다. 앞으로 우리는 편집자 스크립트의 컴파일 버전으로 Torus를 묶을 수 있습니다. 그러나 지금까지 UNPKG는 충분히 신뢰할 수있는 것으로 입증되었습니다.
Codeframe의 코드 편집기 부분은이 코드베이스에 포함되어 있지 않습니다. 여기에서 <textarea> 로 구현 된 매우 베어 본 편집기의 참조 구현이 있지만 위에서 설명한 것처럼 CodeFrame은 클라이언트 (모바일 대 데스크탑 브라우저)에 따라 Monaco 또는 Codemirror를 선택의 코드 편집기로 사용합니다. 코드 프레임 프론트 엔드는 합리적인 코드 편집기를 중심으로 구현할 수있는 작은 API 세트를 통해 편집기와 인터페이스하기 때문에 향후이 세 편집자와 잠재적 인 다른 편집자 사이를 쉽고 안정적으로 전환 할 수 있습니다. 이 API 세트를 EditorCore 인터페이스라고합니다.
Codeframe은 Monaco 및 Codemirror의 EditorCore Wrappers와 함께 제공되며 클라이언트에 따라 런타임에 하나 또는 다른 하나를로드하기로 선택합니다 (편집기를 사용하지 않는 경우 해당 편집기 코드의 일부는 브라우저에로드되지 않습니다). 우리가 다른 편집기 백엔드로 전환하거나 향후 다른 편집기와 편집기를 교체한다면, 작은 API 표면이있는이 래퍼 아키텍처는이를 매우 쉽게 만들어줍니다. 편집기 래퍼가 인터페이스를 올바르게 구현하는 한 편집기는 나머지 코드 프레임과 함께 작동합니다.
Codeframe은 두 가지 이유로 오픈 소스입니다.
두 번째 시점까지, 코드 프레임의 코너가 거칠고 광택을 사용할 수있는 많은 코너가 있습니다. 숙련 된 JavaScript 개발자이고 CodeFrame이 개선되기를 원한다면 DM과 PR이 열려 있습니다.
그러나 더 중요한 것은 웹 프로그래밍에 새로운 이민자들이 CodeFrame의 소스를 읽는 것을 통해 배울 수 있다는 의도로 CodeFrame Open-Source를 만들었습니다. 저장소에서 혼란스러워하는 코드를 발견하면 문제를 제기하거나 더 나은 설명, 설명 또는 더 나은 코드를 위해 풀 요청을 추가하십시오.
Codeframe의 핵심 부분은 친절한 스타터 템플릿 라이브러리입니다. 지금은 작은 세트이지만, 사람들이 새로운 웹 기술에 대해 쉽게 뛰어 다니고 배울 수있는 고품질 샘플 코드 프레임의 저장소로 이것을 키우고 싶습니다.
코드 프레임 또는 샘플이 다른 스타터 템플릿으로 포함하려는 코드 프레임이나 샘플이있는 경우 starter_fixtures/ src/models.js 의 const STARTER_FIXTURES 아래에 파일을 추가하고 풀 요청을 제출하십시오! 이러한 방식으로 설정된 스타터 템플릿은 배포 시간에 데이터베이스에 설정되어 CodeFrame의 모든 실행 버전에 설정되어 있습니다.
코드 프레임 편집기의 주요 기능 중 하나는 "입력 할 때 Reload"기능입니다. 즉, 기본 모드 (기능이 활성화 된)에서 편집기는 편집기의 코드와 함께 미리보기 창을 주기적으로, 때로는 타이핑 중에도 주기적으로 다시로드합니다. 이것은 일반적으로 우수한 편집 경험을 만듭니다. 우리가하는 일을 전환하지 않고 편집 할 때 코드의 결과를 즉시 볼 수 있으며, 엄격한 피드백 루프는 개발에 적합합니다.
그러나 특정 경우, 특히 JavaScript를 작성할 때, 이는 잠재적으로 유효하지 않거나 버그가 많은 JavaScript를 작성할 때 입력 중간에 미리보기가 다시로드됨을 의미합니다. 실수로 미리보기 창으로 다시로드 할 수있는 버그가 많은 동작 중 하나는 무한 루프입니다. 예를 들어, 예를 들어 for(){} while(){} 루프를 작성할 때 특정 상황에서, 우리는 미리보기 창에 다시로드되는 프로그램을 입력하는 중간에 무한 루프를 만들 수 있습니다. 이는 디자인을 통해 전체 편집기 탭을 절단하고 편집자의 편집에 대한 잠재적 데이터 손실을 초래합니다.
Codeframe은 이것에 대한 최초의 편집기가 아니며 Codepen.io는이 동작을 방지하기 위해 라이브로드 설정에서 JavaScript를 계기하는 흥미로운 접근 방식을 가지고 있습니다. 일반적인 경우 무한 루프를 방지하는 것은 불가능하기 때문에 문제는 어려운 일입니다. 이는 중단 문제의 고전적인 변형입니다. Codepen의 경우, 생성 된 JavaScript 코드를 기기로, 동일한 루프가 일정 기간 또는 반복 이상으로 계속 실행되면 루프가 중지됩니다. 불가능한 솔루션이지만 실용적입니다. 대조적으로 결함은 라이브 재 장전 설정에서 무한 루프를 방지하기 위해 아무것도하지 않습니다.
실제로, 실수로 구문-valid JavaScript 코드를 작성하여 무한 루프를 초래하는 것은 상당히 드물다는 것을 알았습니다. 이러한 드문 경우에 Codeframe은 편집기에서 AS-You 유형 재 장전을 비활성화 할 수있는 옵션이 있습니다. 그러나 기본적으로 Codeframe은 결함이 실행을 방지하기 위해 JavaScript를 수정하거나 계기하지 않는 Glitch의 우선 순위를 따릅니다. 이것이 문제가되는 더 많은 사용 사례가 발생하면이 문제를 다시 방문 할 수 있습니다.
코드 프레임에 쓸 수있는 코드의 단순성에 대한 깔끔한 부작용 (컴파일 단계 없음, 번들링 없음)은 미리보기 HTML 페이지에서 얻는 출력이 편집기에 입력 한 코드와 일부 포장지 HTML 코드라는 것입니다. 따라서 "내보내기"버튼 또는 메뉴 항목을 명시 적으로 추가하지 않고, 사용자는 미리보기를 열고 HTML 문서 자체를 생성 한 모든 코드 프레임을 "내보내기"하도록 저장할 수 있습니다.
CodeFrame을 사용하고 앞으로 나아가는 것을 지원하려면 PayPal 또는 Venmo를 통해 CodeFrame에 기부하는 것을 고려하십시오.
또는 CS Education Space, Khanacademy, Hack Club 및 Stutech에서 훌륭한 일을하는 최고의 비영리 단체에 기부하는 것을 고려하십시오.
